I understand that I can scope a style tag to its parent like this:
<div>
<style scoped>
p { color: red }
</style>
<p>Affected</p>
</div>
<p>Unaffected</p>
and that I can include a CSS file in this manner:
<div>
<style scoped>#import(/css/mystyle.css)</style>
<p>Affected</p>
</div>
<p>Unaffected</p>
however, I use Less and would like to use the same mechanism. I tried:
<div>
<style scoped>#import(/css/mystyle.less)</style>
<p>Affected</p>
</div>
<p>Unaffected</p>
how do I do it?
You need to specify type="text/less" attribute for the <style> tag containing LESS code.
Correct syntax for the LESS import statement would be: #import "/css/mystyle.less"; (#import(/css/mystyle.css) is not valid CSS too).
less.js must be included after style tags of interest (e.g. if the <style> is in the <body>, <script src="less.js" ...> goes into the <body> too).
For example:
...
<body>
<span>
<style scoped type="text/less">
#color: red;
div {color: #color}
</style>
<div>
foo!
</div>
</span>
<div>
bar?
</div>
<script src="../less-1.6.0.js" type="text/javascript"></script>
</body>
...
Related
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>
If I attempt to bind data to a CSS stylesheet for a web component within <style> tags, the binding does not work. (All static CSS within that block works)
<html>
<body>
<element name='foo' constructor='FooElement' extends='div'>
<style>
div {
display: {{isVisible ? 'block' : 'none'}};
}
</style>
<template>
<div>Foobar</div>
</template>
<script type="application/dart" src="xfooelement.dart"></script>
</element>
</body>
</html>
If, however, I apply the style to the style attribute of a tag, it works as expected.
<html>
<body>
<element name='foo' constructor='FooElement' extends='div'>
<template>
<div style="display: {{isVisible ? 'block' : 'none'}}">Foobar</div>
</template>
<script type="application/dart" src="xfooelement.dart"></script>
</element>
</body>
</html>
This has obvious drawbacks.
Is there a way to use data binding on CSS properties in a stylesheet file or block?
I would suggest thinking about this in a slightly different manner: try applying a CSS class using the Dart syntax
<html>
<body>
<element name='foo' constructor='FooElement' extends='div'>
<style>
div {
display: block;
}
div.hide {
display: none;
}
</style>
<template>
<div class="{{isVisible ? '' : 'hide'}}">Foobar</div>
</template>
<script type="application/dart" src="xfooelement.dart"></script>
</element>
</body>
</html>
Is it possible to inline a class definition of CSS inside an xhtml file?
I mean, to put someting like:
p.first{ color: blue; }
p.second{ color: red; }
Inside my page, not in a separate CSS file.
I think you're trying to put your CSS in the HTML page, not inline.
You can put CSS in an HTML page (usually in the head) by surrounding it in style tags:
<style type="text/css">
p.first{ color: blue; }
p.second{ color: red; }
</style>
Sure, here's an example. However, it is best practice to keep your styles in a separate css file.
<html>
<head>
<title>Classes</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<style type="text/css">
img {
padding:10px;
margin:5px;
border:1px solid #d5d5d5;
}
div.thumb {
float:left;
}
div.caption {
padding-left:5px;
font-size:10px;
}
</style>
</head>
<body>
<div>your page code etc..</div>
</body>
</html>
You can also put css inside the p tag.
<html>
<body>
<p class="first" style="color:blue;"></p>
<p class="second" style="color:red;"></p>
</body>
</html>
The nice thing about CSS is it works in any file not just an HTML,XML file. You just need to define the syle block like this anywhere in the page
<style type="text/css">
<all my styles goes here>
</style>
In HTML and HTML/XHTML, the standard is, you will put this block in the head section. If it is other type of file for example .aspx, or .php, the block still works, even it is not in head block.
Example
<?php
/* mytest.php file */
<style>
<my styles>
</style>
?>
the same is true for ASPX file.
You can also define inline CSS which means CSS goes right in the element tag. The syntax is
<p style="<all my styles>"> My paragraph contain inline CSS</p>
Yes, you can insert CSS styles in the HTML file. For example:
<p>...</p>
<style type="text/css">
p.first { ... }
</style>
<div>...</div>
As you'll find in the literature, it's not considered a good practice though.