仅仅是自己对着W3CSchool整理的一些 CSS 基础知识点,敲一遍加深下印象也方便以后复习。
- CSS概述
- CSS指层叠样式表(Cascading Style Sheets)
- 样式定义如何显示HTML元素
- 样式通常存储在样式表中
- 把样式添加到HTML4.0中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在CSS文件中
- 多个样式定义可以层叠为一
- 层叠次序
- 一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中(优先级从低到高)
- 浏览器缺省设置
- 外部样式表
- 内部样式表(在<head>标签内)
- 内联样式(在HTML元素内部)
- 个人理解:距被控制的元素越近,优先级越高
- 一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中(优先级从低到高)
- CSS基础语法
- CSS规则由两个主要部分构成:选择器和声明(可以同时多条,用分号隔开)
- 格式:selector {declaration;declaration2;…declarationN}
- 选择器:即需要改变样式的HTML元素
- 声明:属性和值
- 属性和值被冒号分开
- 格式:property:value
- 即CSS规则格式为 selector(property:value;porperty2:value;…}
- 例如:h1{color:red;font-size:14px}
- 值的不同写法和单位
- 颜色:
- 颜色名(如 color:red;)
- 十六进制颜色值(如 color:#ff0000;)
- 缩写(如color:#f00)目的:节约字节
- RGB(如 color:rgb(255,0,0); 或 color:rgb(100%,0%,0%);
- 其他情况使用0时不需要单位,例如0即为0px
- 值为单词:
- 需要给值加引号
- 例如:p{font-family:"sans serif"}
- 代码风格
- 在每条声明末尾都加上分号
- 每行只描述一个属性
- 空格和大小写
- 空格不影响CSS
- 大小写不影响CSS
- 例外:与HTML一起工作时,class和 id名称对大小写敏感
- 颜色:
- CSS规则由两个主要部分构成:选择器和声明(可以同时多条,用分号隔开)
- CSS高级语法
- 选择器的分组
- 例如:h1,h2,h3,h4,h5,h6{color:green;}
- 继承及其问题
- 根据CSS,子元素从父元素继承属性
- 例外:Netscape4和IE6不仅忽略继承,也忽略应用于body的规则
- 对策:使用组选择器进行冗余声明
- 摆脱继承:在子元素中重新声明相同的属性
- 选择器的分组
- CSS派生选择器
- CSS1中称为上下文选择器
- 根据文档中的上下文关系来确定某个标签的样式
- 例如:使列表中所有的strong元素变为斜体字
li strong {
font-style: italic;
font-weight: normal;
}
<p><strong>我是粗体字,但不在列表中,故不会变成斜体</strong></p>
<ol>
<li><strong>我是粗体字,因为在li中,所以会变成斜体</strong></p>
<li>虽然在li中,但我不是粗体字,所以也不会变成斜体</li>
</ol>
- 个人理解:相当于逻辑与关系
- CSSid选择器
- id选择器以"#"来定义
- 例如:(结合下方代码共同作用)
- id选择器以"#"来定义
#red {color: red}
#green {color: green}
- id选择器可以为标有特定 id的 HTML元素指定特定的样式
- 例如:(结合上方代码共同作用)
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
- 注意:id属性只能在每个 HTML 文档中出现一次!
- id选择器和派生选择器
- 在现代布局中,id选择器常常用于建立派生选择器
- 例如:应用于出现在 id是 sidebar的元素内的段落
- 在现代布局中,id选择器常常用于建立派生选择器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
- 即使被标注为 sidebar的元素只能在文档中出现一次,这个 id选择器作为派生选择器可以多次使用
- 例如:
#sidebar p {
font-style: italic;
}
#sidebar h2{
font-style: bold;
}
- 单独的选择器
- id选择器即使不被用来创建派生选择器,它也可以独立发挥作用
- 例如:
- id选择器即使不被用来创建派生选择器,它也可以独立发挥作用
#sidebar {
border: 1px dotted #000;
padding: 10px;
}
- 例外:老版本的IE会忽略这条规则,除非特别定义这个规则所属的元素:
div#sidebar {
border: 1px dotted #00;
padding: 10px;
}
- CSS类选择器
- 在CSS中,类选择器以一个点号显示
- 例如:所有拥有 center类的 HTML元素均为居中
- 在CSS中,类选择器以一个点号显示
.center{text-align: center}
<h1 class="center">
我将被居中。
</h1>
<p class="center">
我也将被居中。
</p>
- 注意:类名的第一个字符不能使用数字!它无法在 Mozila或 Firefox中起作用。
- 和 id一样,class也可被用作派生选择器
- 例如:
.fancy td {
color: #f60;
background: #666;
}
<td class="fancy">
- CSS属性选择器
- 对带有指定属性的 HTML元素设置样式
- 注意:只有在规定了 !DOCTYPE时,IE7和 IE8才支持属性选择器,在 IE6及更低版本中不支持!
- 属性选择器
- 例如:为带有 title属性的所有元素设置样式
[title]
{
color: red;
}
- 属性和值选择器
- 例如:为title="W3School"的所有元素设置样式:
[title=W3School]
{
border:5px solid blue;
}
- 属性和值选择器-多个值
- 例如:为包含指定值的 title属性的所有元素设置样式(适用于由空格分隔的属性值)
[title~=hello] {color: red;}
- 例如:为带有包含指定值的 lang属性的所有元素设置样式(适用于由连字符分隔的属性值)
[lang|=en]{color: red;}
- 设置表单的样式
- 属性选择器在为不带有 class或 id的表单设置样式时特别有用:
- 例如:
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
font-family: Verdana, Arial;
}
- 参考手册(个人理解:类似正则表达式?貌似使用正则速度会变慢)
选择器
描述
[attribute]
用于选取带有指定属性的元素
[attribute=value]
用于选择带有指定属性和值的元素
[attribute~=value]
用于选取属性值中包含指定词汇的元素
[attribute|=value]
用于选取带有以指定值开头的属性值的元素,该值必须是整个单词
[attribute^=value]
匹配属性值以指定值开头的每个元素
[attribute$=value]
匹配属性值以指定值结尾的每个元素
[attribute*=value]
匹配属性值中包含指定值的每个元素
- CSS创建
- 插入 CSS样式表的方法有三种
- 外部样式表
- 当样式需要应用于很多页面时
- 该表一个文件来改变整个站点的外观
- 每个页面使用<link>标签链接到样式表,<link>标签在 head 中
- 外部样式表
例如:浏览器会从 mystyle.css中读到样式声明,并根据它来格式文档
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 外部样式表不能包含 html标签,应该以 .css拓展名进行保存
例如:
hr {color: sienma;}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
注意:不要再属性值和单位之间留空格!(20px而不是 20 px)!
- 内部样式表
- 当单个文档需要特殊的样式时
- 使用<style>标签在 head 中定义内部样式表
- 例如:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.fig");}
</style>
</head>
- 内联样式
- 当样式仅需要在一个元素上应用一次
- 慎用:会使得表现和内容混杂在一起
- 例如:
<p style="color: sinema; margin-left: 20px">
This is a pragraph
</p>
- 多重样式
- 某些属性在不同的样式表中被同样的选择器定义,属性值将从更具体的样式表中继承
- 例如:
外部样式:
h3{
color: red;
text-align: left;
font-size: 8pt;
}
内部样式:
h3{
text-align: right;
font-size: 20pt;
}
个人理解:根据各个样式表优先级形成新的虚拟样式表
{
color: red;
text-align: right;
font-size: 20pt;
}
- CSS概述