CSS初识
一、CSS（Cascading Style Sheet，层叠样式表）语法
css规则由两个主要的部分构成：选择器 + 一条或多条声明。
""" selector { property:value; property:value; property:value; ........ property:value; } """
二、css中的注释
/*CSS注释*/
三、css的几种引入方式
1、行内样式
行内样式是在标记的style属性中设定css样式。不推荐大规模使用。
<p style="color:red">我是一个p标签</p>
2、嵌入式
嵌入式是将css样式集中写在网页的<head></head>标签对的<style></style>标签对中。
格式如下：
<head> <meta charset="UTF-8"> <title>笔记</title> <style> p { background-color:chartreuse; } </style> </head>
3、链接式
外部样式就是将css写在一个单独的文件中，然后在页面进行引入就可以使用。推荐使用此方法。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4、导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：
<style type="text/css"> @import"mystyle.css";这里需要注意css的文件的路径 </style>
注意：
导入式会在整个网页装载完成之后再装载CSS文件，这就导致了一个问题，如果网页比较大则会出现显示无样式的页面，在闪烁一下之后，才会出现网页的样式。这是导入式固有的一个缺陷。使用链接式与导入式不同的是它会在网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果，它不会像导入式那样现显示无样式的网页，然后再显示有样式的网页，这是链接式的有点。
四、CSS选择器
基本选择器
1、标签选择器
p {color:red;}
2、ID选择器
#i1 {
background:red;
}
3、类别选择器
.c1 {
font-size:14px;
}
p.c1 {
color:red;
}
注意：
样式类名不要用数字开头（有的浏览器不认）
标签中的class属性如果有多个，要用空格分隔
4、通用选择器
* {
color:white;
}
层级选择器
1、组合选择器
div,p {
border:1px solid red;
}
2、后代选择器
/*li内部的a标签设置字体颜色*/
li a {
color:green;
}
3、儿子选择器
/*选择所有父级是<div>元素的<p>元素*/ div>p { font-family: "Arial Black","Arial Black",cursive; }
4、毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/ div+p { margin:5px; }
5、弟弟选择器：下例中的p标签与li标签是平级的关系
/*li后面所有的兄弟p标签*/
#i1~p {
border:2px solid royalblue;
}
属性选择器
<body> <p egon="green">绿色的egon</p> <p egon="green gray">双色egon</p> <p egon="green gray red">三色egon</p> <p egon="green gray black red">四色egon</p> <p egon="green black red">又一个三色egon</p> <p egon="yellow">黄色的egon</p> <p egon="green-gray black red">又一个四色egon</p> <p egon="green-gray-red">还是一个三色egon</p> </body>
在<head></head>中加入<style></style>
常用的两个：
/*用于选取带有指定属性的元素*/
[egon] {
color:lawngreen;
}
/*用于选取带有指定属性和值的元素*/
[egon="green"] {
color:red;
}
以下为不常用的：
/*用于选取属性值包含指定值的每个元素*/
[egon~=green] {
color:red;
}
/*结果是所有class以green为开头的全部变成红色*/
[egon |="green"] {
color:red;
}
/*匹配属性值以指定值开头的每个元素*/
[egon^= "g"] {
color:lawngreen;
font-size: 15px;
}
/*匹配属性值以指定值结尾的每个元素*/
[egon$="d"] {
color:blue;
}
/*匹配属性值包含指定值的每个元素*/
[egon*="l"] {
color:cornflowerblue;
}
五、伪类选择器
<a target="_blank" href="https://www.taobao.com/">淘宝网</a>
style 中的内容：
/*未访问的链接*/
a:link{
color:red;
}
/*已访问的链接*/
a:visited {
color:greenyellow;
}
/*鼠标移动到链接上*/
a:hover {
color:black;
}
/*选定的链接*/
a:active {
color:grey;
}
注释：在css定义中：a:link 和 a:visited 必须在前，顺序不定
第三位必须是 a:active ; 第四位是 a:hover 这样才能生效！
before 和 after
/*在每个<p>元素之前插入内容*/ p:before { content:"hello"; color:red; display:block; } /*在每个<p>元素之后插入内容*/ p:after { content:"bye"; color:green; display:block; }
六、选择器的优先级
1、CSS继承
继承时css的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。如果在body中定义了字体颜色，那么在body中的没有另外定义字体颜色值的标签中都会应用到。
body {
color:red;
}
然而css继承性的权重是非常低的，是比普通元素的权重还要低的0。
此时只要给对应的标签设置字体颜色就可以覆盖掉它继承的样式。
p {
color:green;
}
此外，继承是css重要的一部分，虽然不用考虑它为什么能够这样，但css继承也是有限制的。有一些属性不能被继承，如：border,margin,padding,background等。
2、样式优先级
万不得已的时候可以使用 “不讲理”的 !important
3、css属性操作
css文本:css文本属性可定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。
文本颜色
颜色属性被用来设置文本的颜色。
颜色是通过css最经常的指定：
- 十六进制 如： #FF0000
- 一个RGB值 如： RGB(255,0,0)
- 颜色的名称 如： red
缩进文本 text-indent：通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进5em：
<div class="c">
<p style="text-indent: 5em">我是1号p标签</p>
<p>我是2号p标签</p>
<p>我是3号p标签</p>
</div>
注意：一般来说，可以为所有块级元素应用 text-indent , 但无法将该属性应用于行内元素，图像之类的替换元素上也无法使用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
使用负值：text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：
<div class="c">
<p style="text-indent: -5em">我是1号p标签</p>
<p>我是2号p标签</p>
<p>我是3号p标签</p>
</div>
此时发现1号p标签超出了浏览器窗口的左边界。为了避免这种情况出现，建议针对缩进再设置一个外边距或一些内边距：
<div class="c">
<p style="text-indent: -5em;padding-left:10em;">我是1号p标签</p> <!--向右缩进10em，还要向左缩进5em-->
<p style="text-indent: 5em">我是2号p标签</p> <!--向右缩进5em-->
<p style="padding-left: 10em;">我是3号p标签</p> <!--向右缩进10em-->
</div>
使用百分比：text-indent 可以使用所有长度单位，包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值 设置为20%，所影响元素的第一行会缩进其父元素宽度的20%。
下例中，缩进值是父元素的20%，即100个像素：
div { width:500px; } p { text-indent: 20%; } <div> <p>这是一个p标签</p> </div>
继承：text-indent属性可以继承。示例如下：
<!--发现id为inner的标签和它的子标签全部都缩进了10%-->
<div id="outer">
<div id="inner">
我是div
<p>我是p标签</p>
</div>
</div>
水平对齐 text-align
text-align 是一个基本的属性，它会影响一个元素中的文本行相互之间的对齐方式。它的前3个值相当直接，不过第4个和第5个略有些复杂。
前3个值分别是：
- left 把文本排列到左边。默认值：由浏览器决定。
- right 把文本排列到右边。
- center 把文本排列到中间。
- justify 实现两端对齐的效果。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css</title> <style> h2 {text-align:center;} p.publish_time {text-align:right;} p.content {text-align:justify;} </style> </head> <body> <h1>CSS text-align 水平居中</h1> <p class="publish_time">2017 年 5 月 17 号</p> <p class="content"> 有个落拓不得志的中年人每隔三两天就到教堂祈祷，而且他的祷告词几乎每次都相同。第一次他到教堂时， 跪在圣坛前，虔诚地低语：“上帝啊，请念在我多年来敬畏您的份上。让我中一次彩票吧！阿门。” 几天后，他又垂头丧气回到教堂，同样跪着祈祷：“上帝啊，为何不让我中彩票？我愿意更谦卑地来 服侍你，求您让我中一次彩票吧！阿门。”又过了几天，他再次出现在教堂，同样重复他的祈祷。如此周而 复始，不间断地祈求着。到了最后一次，他跪着：“我的上帝，为何您不垂听我的祈求？让我中一次彩票吧！ 只要一次，让我解决所有困难，我愿终身奉献，专心侍奉您……”就在这时，圣坛上发出一阵宏伟庄严的声 音：“我一直垂听你的祷告。可是最起码？你也该先去买一张彩票吧!”</p> <p><b>注意：</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p> </body> </html>
提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。
text-align：
justify:最后一个水平对齐属性是justify。
在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。
需要注意的是，要由用户代理（而不是css）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。
字间隔 word-spacing 有继承性
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为0是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为word-spacing设置一个负值，则会让字之间挤得更紧：
p.spread { word-spacing: 30px; } p.tight { word-spacing:-0.5em; } p.t1 { word-spacing:10px; } <p class="spread"> This is a paragraph . The spaces between words will be increased. </p> <p class="tight"> This is a paragraph . The spaces between words will be decreased. </p> <p class="t1"> This is a paragraph . The spaces between words will be decreased. </p>
注释：css把"字( word )" 定义为任何非空白字符组成的串，并由某种空白字符包围。这个定义没有实际的语义，它只是假设一个文档包含由一个或多个空白字符包围的字。支持CSS的用户代理不一定能确定一个给定语言中哪些是合法的字，而哪些不是。尽管这个定义没有多大价值，不过它意味着采用象形文字的语言或非罗马书写体往往无法指定字间隔。
提示：利用这个属性，可能会创建字间隔太宽的文档，所以，使用 word-spacing 时要小心。
可能的值
| 值 | 描述 |
| normal | 默认。定义单词间的标准空间 |
| length | 定义单词间的固定空间 |
| inherit | 规定应该从父元素继承 word-spacing 属性的值。 |
字母间隔 letter-spacing 有继承性
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为0。
注释：允许使用负值，这会让字母之间挤得更紧。
可能的值
| 值 | 描述 |
| normal | 默认。规定字符间没有额外的空间。 |
| length | 定义字符间的规定空间（允许使用负值）。 |
| inherit | 规定应该从父元素继承 letter-spacing 属性的值。 |
p.spread { letter-spacing: 30px; } p.tight { letter-spacing:-0.5px; } p.t1 { word-spacing:10px; } <p class="spread"> This is a paragraph . The spaces between words will be increased. </p> <p class="tight"> This is a paragraph . The spaces between words will be decreased. </p> <p class="t1"> This is a paragraph . The spaces between words will be decreased. </p>
字符转换 text-transform （有继承性）:控制文本的大小写
说明：这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。如果值为 capitalize ，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个"词"。
注释：不同的用户代理可能会用不同的方法来确定单词从哪里开始，相应地确定哪些字母要大写。例如，文本 "w3-school" 可以用两种方式显示：" W3-school " 和 " W3-School "。CSS并没有规定哪一种是正确的，所以这两种都是可以的。
可能的值
| 值 | 描述 |
| none | 默认。定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母，仅有小写字母。 |
| inerit | 规定应该从父元素继承 text-transform 属性的值。 |
p.spread { text-transform: uppercase; } p.tight { text-transform: lowercase; } p.t1 { text-transform: capitalize; } <p class="spread"> This is a paragraph . The spaces between words will be increased. </p> <p class="tight"> This is a paragraph . The spaces between words will be decreased. </p> <p class="t1"> This is a paragraph . The spaces between words will be decreased. </p>
使用text-transform 的好处：
1、只需写一个简单的规则来完成这个修改，无需修改p元素本身。
2、当决定将所有的大小写再切换成原来的大小写的时候也可以很容易的完成。
文本装饰 text-decoration （有继承性）：
这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会 “延伸” 到后代元素中，不要求用户支持blink。
可能的值：
| 值 | 描述 |
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线。 |
| blink | 定义闪烁的文本。 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
也可以使用 text-decoration:none; 来去掉超链接的下划线。
注意：如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少在默认是这样子的，不过也不能完全保证其颜色肯定有区别）。
也可以在一个规则中结合多种装饰。如果希望所有的超链接既有下划线又有上划线，则规则如下：
a:link a:visited { text-decoration: underline overline; }
不过要注意的是，如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。
h1.s { text-decoration: line-through; } h1 { text-decoration: underline overline; } <h1 class="s">这是一个h1标签</h1>
h1 { text-decoration: overline; } h2 { text-decoration:line-through; } h3 { text-decoration: underline; } h4 { text-decoration: blink; } <h1>这是一个h1标签</h1> <h2>这是一个h2标签</h2> <h3>这是一个h3标签</h3> <h4>这是一个h4标签</h4>
处理空白符：white-space 有继承性
white-space属性设置如何处理元素内的空白。
通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的HTML处理已经完成了空白符处理：它会把所有空白符合并成一个空格。所以给定以下标记，它在web浏览器中显示是，各个字之间只会显示一个空格，同时忽略元素中的换行：
p { white-space:normal; } <p>This paragraph has many spaces in it.</p>
white-space:normal ; 是告诉浏览器按照平常的做法去处理：六代多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。
可能的值
| 值 | 描述 |
| normal | 默认。空白会被浏览器忽略 |
| pre | 空白会被浏览器保留。其行为方式类似HTML中的<pre>标签。 |
| nowrap | 文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承white-space属性的值。 |
值pre
如果将 white-space 设置成 pre ,受这个属性影响的元素中，空白符的处理就有所不同，其行为就像XHTML 的pre 元素一样；空白符不会被忽略。
p { white-space:pre; } <p>This paragraph has many spaces in it.</p>
值nowrap
与之相对的值是 nowrap ，它会防止元素中的文本换行，除非使用了一个br元素。
p { white-space:nowrap; } <p>This paragraph has many spaces in it.</p>
值 pre-wrap 和 pre-line
如果元素的属性设置为pre-wrap，那么该元素中的文本会保留空白符序列，但是文本行会正常地换行，且源文本中的行分隔符以及生成的行分隔符也会保留。
pre-line则会像正常文本中一样合并空白符序列，但保留换行符。
p { white-space:pre-wrap; } <p> This paragraph has many spaces in it.</p>
p { white-space:pre-line; } <p> This paragraph has many spaces in it.</p>
总结:
下表总结了 white-space 的属性行为
| 值 | 空白符 | 换行符 | 自动换行 |
| pre-line | 合并 | 保留 | 允许 |
| normal | 合并 | 忽略 | 允许 |
| nowrap | 合并 | 忽略 | 不允许 |
| pre | 保留 | 保留 | 不允许 |
| pre-wrap | 保留 | 保留 | 允许 |
水平对齐
text-align 属性规定元素中的文本的水平对齐方式。
- left 把文本排列到左边。默认值：由浏览器决定
- right 把文本排列到右边
- center 把文本排列到中间
- justify 实现两端对齐文本效果
/* font-size: 10px; line-height : 200px; 文本行高，通俗的将，文本高度加上文字上下的空白区域的高度 50%基于字体大小的百分比 vertical-align :-4px; 设置元素内容的垂直对齐方式，只对行内元素有效，对块级元素无效 text-decoration : none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线 font-family : 'Lucida Bright' font-weight :lighter/bold/border font-style :oblique text-indent :150px; 首行缩进150px letter-spacing :10px 字母间距 word-spacing :20px; 单词间距 text-transform : capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写 */
背景属性
/*背景颜色*/ background-color: red; /*背景图片*/ background-image: url ("1.jpg"); /*背景重复 repeat(默认):背景图片平铺排满整个网页 repeat-x: 背景图片只在水平方向上平铺 repeat-y: 背景图片只在垂直方向上平铺 no-repeat: 背景图片不平铺 */ background-repeat: no-repeat; /*背景位置*/ background-position: right top (20px 20px);
支持简写：
background: #ffffff url("1.png") no-repeat right top;
使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
边框
边框属性
- border-width
- border-style (required)
- border-color
#i1 { width:100px; height: 100px; border-width: 10px; border-style: double; border-color: red; } <div id="i1"></div>
通常使用简写方式：
#i1 { width:100px; height: 100px; border: 10px double red; }
单独设置
#i1 { width:100px; height: 100px; border-width:10px; border-top-style: dotted; border-right-style:solid; border-bottom-style: dotted; border-left-style:double; }
列表属性
list-style-type 设置列表项标志的类型
list-style-image 将图像设置为列表项标志
list-style-position 设置列表中列表项标志的位置
list-style 简写属性。用于将所有用于列表的属性设置于一个声明中
sdhjkasdhl
