CSS基础学习笔记
2014-11-23 10:54
155 查看
仅仅是自己对着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高级语法
选择器的分组
例如: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选择器以"#"来定义
例如：（结合下方代码共同作用）
#red {color: red}
#green {color: green}
id选择器可以为标有特定
id的 HTML元素指定特定的样式
例如：（结合上方代码共同作用）
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
注意：id属性只能在每个
HTML 文档中出现一次！
id选择器和派生选择器
在现代布局中，id选择器常常用于建立派生选择器
例如：应用于出现在 id是
sidebar的元素内的段落
#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选择器即使不被用来创建派生选择器，它也可以独立发挥作用
例如：
#sidebar {
border: 1px dotted #000;
padding: 10px;
}
例外：老版本的IE会忽略这条规则，除非特别定义这个规则所属的元素:
div#sidebar {
border: 1px dotted #00;
padding: 10px;
}
CSS类选择器
在CSS中，类选择器以一个点号显示
例如：所有拥有 center类的
HTML元素均为居中
.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样式表的方法有三种
外部样式表
当样式需要应用于很多页面时
该表一个文件来改变整个站点的外观
每个页面使用<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基础学习笔记
- C#学习笔记8：HTML和CSS基础学习笔记
- 〖前端开发〗HTML/CSS基础知识学习笔记
- 【慕课网】php工程师学习计划之我的学习笔记——01 入门必学web基础 htmlcss基础课程 篇
- css基础学习笔记（二）
- CSS学习笔记（1）CSS基础语法/字体/文本
- [学习笔记]CSS基础
- CSS学习笔记之一：CSS基础
- HTML+CSS基础课程学习笔记-第一章HTML简介
- CSS基础知识学习笔记
- [网页基础]DIV+CSS学习笔记(二)深入理解盒子模型
- 学习笔记（一） HTML+CSS基础课程
- CSS基础学习笔记
- WEB标准布局（DIV+CSS）学习笔记（二）-- DIV的布局基础
- css基础学习笔记
- CSS学习笔记（五）背景图基础
- jQuery学习笔记之五----基础DOM和CSS操作
- CSS学习笔记---css基础举例
- css基础学习笔记（三）
- css基础学习笔记(一）