1. CSS 基础
2019-06-27 本文已影响0人
晨曦Bai
w3c 教程
1. 优先级由高到低顺序
- 内联样式
<p color="red"></p> - 内部样式
<head color="green"></head> - 外部样式表
style.css
2. CSS 语法规则
- css 语法由2部分组成: 选择器,以及一条或多条声明.
selector {declaration1;declaration2; ... declarationN}
- selector 通常是您需要改变样式的HTML 元素
- declaration 由1个属性和1个值组成.
property:value
h1 {color:red; font-size:14px; font-family:"sans serif"}
- h1 是选择器
- color 属性
- red 属性值
- value 为若干个单词,则要给值加引号
3. 选择器分组
- 对选择器进行分组, 这样,被分组的选择器可以分享相同的声明.
- 用逗号将需要分组的选择器分开.
h1,h2,h3,h4,h5 {
color: green;
}
4. 派生选择器
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
-- css
li strong {
color: red;
}
strong {
color : blue;
}
------------------
--html
<strong>Blue <strong>
<li><strong>Red<strong><li>
5. id选择器
- id 选择器以"#" 来定义
- id 属性只能在每个html 文档中出现一次
#setRed {color: red;}
#setGreen {color: green;}
<p id="setRed">this paragraph is set to red</p>
<p id="setGreen">this paragraph is set to green </p>
6. 现代布局中, id 选择器常常用于建立派生选择器
#sidebar p {
font-style:italic;
text-align: right;
margin-top:0.5em;
}
- 上面的样式只会应用于出现在id 是sidebar 的元素内的段落.
6. 类选择器
- 类选择器以一个点号显示
.center {text-align: center}
<h2 class="center">head 2</h2>
7. 和 id 一样，class 也可被用作派生选择器：
.fancy td {
color: #f60;
background: #666;
}
- 元素也可以基于它们的类而被选择：
td.fancy {
color: #f60;
background: #666;
}
8. 属性选择器
- 对带有指定属性的html 元素设置样式
例如为 带有title 属性的所有元素设置样式 - 属性选择器用
[]定义
[title]
{
color:red;
}
- 为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello] { color:red; }
-----------
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
- 为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en] { color:red; }
---------------------
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
- 属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
-----------------
<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">
</form>
