前端web之CSS基础(2)
介绍
CSS用于设计风格和布局，是HTML页面美观。
比如，使用CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。
CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
选择器通常是需要改变样式的 HTML 元素或者标签；
每条声明由一个属性和一个值组成。属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
例如：
h1 {color:red; font-size:14px;}
dd {
color: sienna;
text-align: left;
font-size: large;
}
如果有多个选择器的属性相同，可以对选择器进行分组，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开，如：
h1,h2,h3,h4,h5,h6 {
color: green;
}
CSS选择器
元素选择器
最常见的 CSS 选择器是元素选择器。
选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。
h1 {color:red; font-size:14px;}
类选择器
- 类名前加一个点号（.），标记该选择器为类选择器。
.important_class {color:blue;}
- 类选择器可以单独使用，也可以与其他元素结合使用。
例如：只选择段落中的文本显示为红色文本
p.important_class {color:blue;}
- 多类选择器
通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：
"important warning">
This paragraph is a very important warning.
class 中同时包含 important 和 warning 的所有元素还有一个红色的背景 。CSS就可以写作：
.important.warning {color: red;}
ID 选择器
ID 选择器前面有一个 # 号 。
#intro {font-weight:bold;}
- 注意：
在一个 HTML 文档中，同一种元素的ID 选择器会使用一次，而且仅一次。
ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素
- 选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器
/*匹配含有title属性的元素*/
[title] {color:red;}
- 选择含有某个属性，且属性值为指定值的元素
/*匹配含有name属性且属性值为“btn_sub”的元素*/
[name="btn_sub"] {color:red;}
- 根据多个属性进行选择
/*匹配同时含有name属性和id属性的元素*/
[name][id] {color:green;}
- 选择某种标签，且具有某个属性的元素
/*匹配p标签且含有name属性的元素*/
p[name="p_aws"] {color:red;}
- 匹配含有某个属性值的元素
/*匹配含有name属性, 且属性中含有字段p_aws的元素*/
[name~="p_aws"] {color:green;}
html示例：
/* 能匹配 */
"p_aws swds", id="demo">W3School
/* 不能匹配 */
"p_awsd">python
- 子串匹配属性选择器
| 类型 | 说明 |
|---|---|
| [abc^=“def”] | 选择 abc 属性值以 “def” 开头的所有元素 |
| [abc$=“def”] | 选择 abc 属性值以 “def” 结尾的所有元素 |
| [abc*=“def”] | 选择 abc 属性值中包含子串 “def” 的所有元素 |
常用选择器列表
| 选择器 | 例子 | 说明 |
|---|---|---|
| .class | .intro | 选择 class=“intro” 的所有元素。 |
| #id | #firstname | 选择 id=“firstname” 的所有元素。 |
| * | * | 选择所有元素。 |
| element | p | 选择所有 元素。 |
| element,element | div,p | 选择所有 元素和所有 元素。 |
| element element | div p | 选择 元素内部的所有 元素。 |
| element>element | div>p | 选择父元素为 元素的所有 元素。 |
| element+element | div+p | 选择紧接在 元素之后的所有 元素。 |
| [attribute] | [target] | 选择带有 target 属性所有元素。 |
| [attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 “flower” 的所有元素。 |
| [attribute|=value] | [lang | =en] |
| :link | a:link | 选择所有未被访问的链接。 |
| :visited | a:visited | 选择所有已被访问的链接。 |
| :active | a:active | 选择活动链接。 |
| :hover | a:hover | 选择鼠标指针位于其上的链接。 |
| :focus | input:focus | 选择获得焦点的 input 元素。 |
| :first-letter | p:first-letter | 选择每个 元素的首字母。 |
| :first-line | p:first-line | 选择每个 元素的首行。 |
| :first-child | p:first-child | 选择属于父元素的第一个子元素的每个 元素。 |
| :before | p:before | 在每个 元素的内容之前插入内容。 |
| :after | p:after | 在每个 元素的内容之后插入内容。 |
| :lang(language) | p:lang(it) | 选择带有以 “it” 开头的 lang 属性值的每个 元素。 |
| element1~element2 | p~ul | 选择前面有 元素的每个
|
| [attribute^=value] | a[src^=“https”] | 选择其 src 属性值以 “https” 开头的每个 元素。 |
| [attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 “.pdf” 结尾的所有 元素。 |
| [attribute*=value] | a[src*=“abc”] | 选择其 src 属性中包含 “abc” 子串的每个 元素。 |
层叠方式
插入样式表有如下4种方式：
1. 浏览器缺省设置
当不为html设置任何样式时，显示在浏览器上，b标签会显示粗体、p有纵向margin、h1字号比p大一倍……这是为什么呢？
因为浏览器自带一个默认的样式，如果html中没有为标签设置样式，则浏览器会按照自己的样式来显示。
- 注意
不同浏览器的默认样式有些地方是不一样的。我们在写css时，因为有浏览器兼容性问题，可以首先设置 * {margin:0; padding:0;}，全部弄成0，确保各个浏览器都统一。
2. 外部样式表
-
使用场景
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。 -
用法
每个页面使用 标签链接到样式表。 标签在（文档的）头部。
有三个属性用于设置外部样式表：
href： 值为外部资源地址，这里是css的地址
rel：定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet
type： 规定被链接文档的 MIME 类,这里是值为text/css -
示例
例如：定义网站所有页面中h，body，p标签风格一致整体风格保持一致
第一步：先在HTML网页文件同级目录创建css文件目录styles, 然后在该目录下创建mystyle.css文件。内容如下：
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/bg_img.gif");}
第二步：在网页文件 home.html的head标签中引用mystyle.css。
文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
"stylesheet" type="text/css" href="styles/mystyle.css" />
3. 内部样式表（位于 标签内部）
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
4. 内联样式（在 HTML 元素内部）
当样式仅需要在一个元素上应用一次时，使用内联样式。
要使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
"demo" style="color: sienna; margin-left: 20px">段落示例
层叠顺序
以上4中插入方式中，数字 4 拥有最高的优先权。
在有多种样式表定义时，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：
h3 {
text-align: right;
font-size: 20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color: red;
text-align: right;
font-size: 20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
CSS样式
单位
- em：
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。 - px:
对于低分辨率设备（绝大部分显示器，手机屏幕），1个css像素相当于最接近参考像素的整数个设备像素 - %百分比
相对于父元素的大小比例
背景
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
| 属性 | 说明 | 示例 |
|---|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 | |
| background-color | 设置元素的背景颜色。 | p {background-color: gray;} |
| background-position | 改变图像在背景中的位置,可以使用一些关键字：top、bottom、left、right 和 center | p {background-position:center;} |
| background-image | 把图像放入背景，属性值 repeat 导致图像在水平垂直方向上都平铺 | body {background-image: url(/i/eg_bg_04.gif);} |
| background-repeat | 在页面上对背景图像进行平铺 | body {background-repeat:no-repeat;} |
| background-attachment | background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。 | body {background-attachment:fixed} |
文本
文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
| 属性 | 说明 | 示例 |
|---|---|---|
| text-indent | 文本缩进, 可以设置为text-indent 可以使用所有长度单位，包括百分比值和负值 。百分数要相对于缩进元素父元素的宽度。text-indent 属性可以继承 | 段落首行缩进 p {text-indent: 5em;} |
| text-align | 元素中的文本行互相之间的对齐方式。共有5种对齐方式: 值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居； justify为水平居中，两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。 inherit，规定应该从父元素继承 text-align 属性的值。该属性默认值为left。 |
设置标题居中 h1,h2,h3 { text-align:center; } |
| word-spacing | 改变字（单词）之间的标准间隔。word-spacing 属性接受一个正长度值或负长度值。其默认值 normal 与设置值为 0 是一样。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近。 | 把段落p中文本拉近 p.tight {word-spacing: -0.5em;} |
| letter-spacing | 字母间隔，字母间隔修改的是字符或字母之间的间隔。letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。 | 设置标题字母之间间隔 h4 {letter-spacing: 20px} |
| text-transform | 处理文本的大小写。有4个属性值：none，uppercase全部字母大写，lowercase全部字母小写，capitalize只对每个单词的首字母大写 | 标题大写 h1 {text-transform: uppercase} |
| text-decoration | 向文本添加修饰，有 5 个值：none、underline 、overline、line-through、blink文本闪烁。还可以在一个规则中结合多种装饰 | 给超链接加上下划线和上划线 a {text-decoration: underline overline;} |
| white-space | 通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。有4种值：normal，丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格；pre，浏览器将会注意额外的空格，甚至回；nowrap，会防止元素中的文本换行，除非使用了一个 br 元素，与pre相反 | 给定p段落中，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行 p {white-space: normal;} |
| direction | 块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。有2个属性值：ltr，默认值，横向排列；rtl，竖排。 | 定义堕落中古诗文竖排，p.old_poetry { direction: rtl; } |
字体
字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。
在 CSS 中，有两种不同类型的字体系列名称：
- 通用字体系列 - 拥有相似外观的字体系统组合（比如 “Serif” 或 “Monospace”）
- 特定字体系列 - 具体的字体系列（比如 “Times” 或 “Courier”）
除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：
- Serif 字体,
- Sans-serif 字体
- Monospace 字体
- Cursive 字体
- Fantasy 字体
常用属性如下：
| 属性 | 说明 | 示例 |
|---|---|---|
| font-family | 定义文本的字体系列 | 在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。需要把这些字体按照优先顺序排列，然后用逗号进行连接： p {font-family: Times, TimesNR, ‘New Century Schoolbook’,Georgia, ‘New York’, serif;} |
| font-style | 用于规定斜体文本，该属性有三个值：normal - 文本正常显示；italic - 文本斜体显示；oblique - 文本倾斜显示 | 段落中含有类oblique属性的文本斜体 p.oblique {font-style:oblique;} |
| font-weight | 设置文本的粗细，使用 bold 关键字可以将文本设置为粗体。 | p.thick {font-weight:bold;} |
| font-size | 设置文本的大小。font-size 值可以是绝对或相对值 | 二级标题为40px大小 h2 {font-size:2.5em;} |
| font | 简写属性。作用是把所有针对字体的属性设置在一个声明中。 | p.ex2 { font:italic bold 12px/30px arial,sans-serif;} |
链接
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
列表
列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。
常用属性如下：
| 属性 | 说明 | 示例 |
|---|---|---|
| list-style-type | 列表项的标志类型 | 把无序列表中的列表项标志设置为方块 ul {list-style-type : square} |
| list-style-image | 对各标志使用一个图像 | 使用图像作为标志 ul li {list-style-image : url(xxx.gif)} |
| list-style-position | 规定列表中列表项目标记的位置.可以确定标志出现在列表项内容之外还是内容内部 | ul {list-style-position:inside;} |
| list-style | 3 个列表样式属性合并为一个方便的属性。list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。 | li {list-style : url(example.gif) square inside} |
表格
CSS 表格属性可以改善表格的外观。
常用属性如下：
| 属性 | 说明 | 示例 |
|---|---|---|
| border-collapse | 设置是否将表格边框折叠为单一边框 | 将表格边框折叠为单一边框 table,th, td { border-collapse:collapse;} |
| width | 表格的宽度 | 表格宽度设置为 100% table {width:100%;} |
| height | 表格的高度 | 表格高度设置为 50px table {height:100%;} |
| text-align | 设置水平对齐方式，比如左对齐、右对齐或者居中 | table {text-align:left;} |
| vertical-align | 垂直对齐方式，比如顶部对齐、底部对齐或居中对齐 | table {vertical-align:bottom;} |
| padding | 控制表格中内容与边框的距离 | table {padding:5px;} |
| background-color | 设置表格的背景颜色 | th {background-color :green;} |
轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
常用属性如下：
| 属性 | 说明 |
|---|---|
| outline-color | 设置轮廓的颜色。 |
| outline-style | 设置轮廓的样式。 |
| outline-width | 设置轮廓的宽度。 |
CSS框模型
框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
* {
margin: 0;
padding: 0;
}
padding 属性定义元素边框与元素内容之间的空白区域。
border 属性允许你规定元素边框的样式、宽度和颜色。
margin 属性设置外边距。margin 可以设置为 auto。更常见的做法是为外边距设置长度值。
CSS定位
CSS定位
即利用定位和浮动属性，定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
一切元素皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式
- static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 - relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
例如：
将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
效果如下：
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
- absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样，
例如。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
效果如下：
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
- fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
参考文献：
如何创建CSS
CSS选择器
CSS样式