css初学
2015-09-21 13:55
701 查看
</pre>样式规则结构:<p></p><p><span style="white-space:pre"></span></p><pre name="code" class="css">selector{
<span style="white-space:pre"> </span>property: value;
<span style="white-space:pre"> </span>property: value;
}selector:选择符,表示要格式化什么内容,比如head。
property:属性,表示要应用什么样式。
value:值,表示给样式设置什么样的值。
使用类格式化,比如类名为ArticleTitle.
<h1 class="ArticleTitle">HEML5 is Winning</h1>
.ArticleTitle{
<span style="white-space:pre"> </span>font-family:Garamond,serif;
<span style="white-space:pre"> </span>font-size: 40px;
}
样式表注释。
css注释以/*字符开头,以*/字符结尾。
用<div>元素:
<div>
<span style="white-space:pre"> </span><p>Here are two paragraphs of content.</p>
<span style="white-space:pre"> </span><p>In a div container.</p>
</div>
1.继承的值。在<div>元素上设置了属性后,这个元素内部的所有属性都会应用同样的字体样式(除非在具体的元素上覆盖这些规则)。
2.盒模型。一个<div>元素就是一个自然的容器。可以给它添加边框、空距和不同的背景颜色(图片),从而让它在页面中更加显眼。
3.分栏。实现分栏的一种方式就是把每一个栏的内容包装在一个<div>元素中,然后再使用css定位属性将它们放在适当的位置上。
上下文选择符:
.Content h2{
<span style="white-space:pre"> </span>color:#24486C;
<span style="white-space:pre"> </span>font-size: medium;
}
这个选择符先会查找带有Content类的元素,然后再在该元素中查找<h2>元素,找到后为它们应用不同的文本颜色和字体大小。
<div class="Content">
<span style="white-space:pre"> </span>...
<span style="white-space:pre"> </span><h2>Mayan Doomsday</h2>
<span style="white-space:pre"> </span>...
</div>
.Content .LeanIn{
<span style="white-space:pre"> </span>font-variant:small-caps;
}
这个选择符会查询类为LeadIn的元素,但它必须被包含在类为Content的元素中。
<div class="Content">
<span style="white-space:pre"> </span><p><span class="LeadIn">Right now</span>,...</p>
<span style="white-space:pre"> </span>...
</div>
ID选择符:
</pre><pre name="code" class="html">#Menu {
<span style="white-space:pre"> </span>border-width: 2px;
<span style="white-space:pre"> </span>border-style: solid;
}
<div id="Menu"> ...</div>
一个ID只能指定给页面的一个元素,ID选择符非常适合用来为那些一个页面中唯一的、不会重复的元素应用样式。如菜单,导航条。
属性选择符:
input[type="text"]{
<span style="white-space:pre"> </span>background-color:silver;
}首先,这个选择符会取得所有<input>元素。然后,筛选出type属性为text的<input>元素,只对这些元素应用样式。
label[for="name"]{
<span style="white-space:pre"> </span>width:200px;
}
<label for="name">Name:</label>
<input id ="name" type="text"><br>
相关文章推荐
- 【笔记】HTML+CSS基础课程(慕课)-CSS部分
- 为什么给css添加border和padding不起效果
- jqgrid单元格内容过长 样式处理
- 定义radiobutton的样式,radiogroup设置选中
- css选择器
- html+css基础2(标签选择,分页,行和块元素)
- css布局—— 固定+自适应
- css样式加载顺序及覆盖顺序深入理解
- CSS常用的单词用法以及解释
- CSS3 box学习笔记
- CSS复习
- CSS笔记
- JS+CSS实现简单的二级下拉导航菜单效果
- CSS基于单张背景图实现自适应宽度的圆角菜单效果代码
- DIV+CSS规范命名大全
- 一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)
- CSS3径向渐变linear-gradient
- css的扩展技术
- css技术扩展
- JS+CSS实现简单的二级下拉导航菜单效果