Can someone plz explain the meaning of nodec?
I saw it is being used as a.nodec in CSS
But totally have no idea what is the purpose of this usage.
TQ
If you saw something like
a.nodec {
...
}
Then "nodec" is a class name of "a" tags like in this HTML:
<a class="nodec" href="?">Link #1</a>
<a class="nodec" href="?">Link #2</a>
recently I've been studying about that problem too. The is a reason for you to do a.nodec instead of just .nodec.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.underline{
text-decoration:underline;
}
</style>
</head>
<body>
<div class="underline">
<h1>this is h1</h1>
<p>this is p</p>
</div>
</body>
</html>
Assume the .underline as the .nodec and based on the code above, the output will show h1 and p underlined. For some reasons, you may only want specific element to be able to use the class (for example, you only want h1 to use the underline class). For that reason, you can specify what kind of element can only use the class you have made. Check out the code below.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1.underline{ <!--just added the h1 in front of .underline-->
text-decoration:underline;
}
</style>
</head>
<body>
<div class="underline">
<h1>this is h1</h1>
<p>this is p</p>
</div>
</body>
</html>
In this case, the div won't be able to use the underline class unless you set the class for h1 element to underline (for example this is h1)
In conclusion, it's just about limiting number of element to use specific class. Hope you find this helpful!
Related
Summary of the problem
The following image is a description of bootstrap icon.
I don't know how to use "Code point".
Unicode: U+F120
CSS: \F120
JS: \uF120
HTML: 
For Using HTML code point, All you need is just set the the font-family of your element(or your body) to 'Bootstrap-icons' and then everything will work.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<style>
.test
{
font-family:'Bootstrap-icons';
}
</style>
<body>
<div class="test">

</div>
</body>
</html>
I managed to find how to use CSS of "code point".
Add following html into the head element of document.
Set font-family to be Bootstrap-icons.
And you can use css code point \F120 to fill the value of content property.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
<style>
h3::before {
font-family:'Bootstrap-icons';
content:'\F120';
}
</style>
The otheres (Unicode, JS, HTML) are still ununderstood.
Thank you for reading my broken English! :)
Is it possible to have a different style source for each div.
Example
<div src="abc.css"> A
</div>
<div src="xyz.css">B
</div>
You can have multiple stylesheets in your HTML, and then use the CSS code inside them for your divs. Here; 'div1' class is inside div1-styles.css and 'div2' class is inside div2-styles.css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="div1-styles.css">
<link rel="stylesheet" href="div2-styles.css">
</head>
<body>
<div class='div1'>
Div-1 text
</div>
<div class='div2'>
Div-2 text
</div>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
First its not a good practice but even is a horrible practice.. you can just use different classes in your style file and will done the work.. but if you're insisting in that even if its not right.. you can do it using this JQuery plugin that used scoped attribute to achieve that
The plugin: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin
#section>.snb .tit{position:relative;}
#section>.snb .tit h1{color:#2765b1;font-size:20px;text-indent:25px;}
I am not sure how to apply the css code above to jsp page. It looks different from the basic css with
body {
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
kind format.
You can apply like this :
<html>
<head>
<style>
#section>.snb .tit{position:relative;}
#section>.snb .tit h1{color:#2765b1;font-size:20px;text-indent:25px;}
</style>
</head>
<body>
<div id="section">
<div class="snb">
<div class="tit">
<h1>test text</h1>
</div>
</div>
</div>
</body>
</html>
Please refer this it will help you to understand css selectors.
In
#section>.snb .tit h1{color:#2765b1;font-size:20px;text-indent:25px;}
it look for h1 tag in element with 'tit' class inside all element's with class value as 'snb' in element with id 'section'.
I'm trying to include CSS in Phoenix templates (EEx) so that I can define components (that render on the server) that not only include HTML but also their own CSS. For that I would like to include a tag with the CSS for that template (component) hoping it would be injected in the <head> but that's not what happen. I made a few experiences and wasn't able to achieve that (weird enough when I did that my webpage didn't break and I could see <head> and <style> tags inside the <body>).
A sample templateXYZ.html.eex code could be:
<style>
.main {color: red;}
</style>
<div class="main">
<!-- Html code goes here -->
</div>
Note that the main goal of this is to allow me to write all the "component" code in one template (Html, CSS and Javascript - with the later there's no problem so I'm omitting it in the example/question) in a way that I only need to place the template in the proper place inside my other templates (rendering a template inside another template is also not a problem) and do nothing more (like as when I have a separated CSS file and need to import it in the <head>).
As a comparison, I can do what I want in the client side with raw Javascript that places my <style> and HTML in the DOM like this:
function f_auxButton(imgpath,id){
if (document.getElementById('auxButtonId')){} // <style> is only created on first component instanciation to avoid duplication
else {
$('<style id="auxButtonId">\
.auxButton {\
width: 25px;\
height: 25px;\
margin: 10px;\
}\
<\style>').appendTo("head")}
return '<img src="'+imgpath+'" class="auxButton" id="'+id+'">'
Then I just have to call <script>f_auxButton(arg1,arg2)</script> where I want to place the HMTL and I get it (plus the <style> tag that goes into the <head>.
So, is there a way of doing this?
app.html.eex
<!doctype html>
<html>
<head>
<title></title>
<%= render_existing view_module(#conn), "_styles.html", assigns %>
</head>
<body>
<div class="main">
<%= render_existing view_module(#conn), "_component.html", assigns %>
</div>
</body>
</html>
/web/templates/shared/_components.html.eex
<%= render MyApp.PageView, "_styles.html" %>
<img src="<%= static_path(MyApp.Endpoint, "/path/example.png")%>", class="auxButton">
/web/templates/page/_styles.html.eex
<style>
.auxButton {width: 25px;height: 25px;margin: 10px;}
</style>
Final Result
<!doctype html>
<html>
<head>
<title>My App</title>
<style>
.auxButton {width: 25px;height: 25px;margin: 10px;}
</style>
</head>
<body>
<div class="main">
<img src="/path/example.png" class="auxButton">
</div>
</body>
</html>
I'm doing something like this however, the word world won't appear. having that rule declare in the head css, it works fine.
can anyone explain this to me?
<span id="aa" style="#aa::after{content=" world";}">hello</span>
No. The style attribute only defines style properties for a given HTML element. Pseudo-classes are a member of the family of selectors, which don't occur in the attribute.
The style attribute doesn't accept selectors. It only accepts the rules to apply to the current element. You can't do this with a style attribute.
Working jsFiddle Demo
You must separate your CSS from your HTML:
<!doctype html>
<html>
<head>
<title>My Web Page</title>
<style>
#aa:after {
content: 'world';
}
</style>
</head>
<body>
<span id="aa">hello</span>
</body>
</html>
It's also better to create a file with .css extension, for example styles.css,
and put the style in it:
#aa:after {
content: 'world';
}
And in your HTML, link to this file:
<!doctype html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<span id="aa">hello</span>
</body>
</html>
Be sure that your html and css file are in the same folder.
The style attribute applies styles to the current element; it cannot contain complete style sheet rules with selectors.
Although the selector in this case happens to match the same element, if it were possible, you would also be able to do this, which would make very little sense:
<div id="one" style="#two { display: none; }"></div>
... much content ...
<div id="two">Huh?</div>