css总结

怎么看待CSS

CSS 是一种选择HTML元素、然后设定选定HTML元素CSS属性的机制； CSS选择符和样式构成了一条CSS规则。

CSS规则

规则是一条完整的CSS指令，规则说明了要修改的元素，和元素上要应用的样式

为文档增加样式的三种方法

行内样式

就是写在标签style属性中的样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8"/>
</head>
<body>
    <p style="color:red">这就是就行内样式的写法</p>
</body>
</htmL>

嵌入样式

嵌入样式是放在head中的

 <!DOCTYPE html>
 <html>

     <head>
         <meta charset="utf8" />
         <style>
             p { color: blue}
         </style>
     </head>

     <body>
         <p>这就是就嵌入样式的写法</p>
     </body>
 </htmL>

链接样式

链接样式是通过link标签引入的样式

<link href="./css/css1.css" rel="sytlesheet" type="text/css" />

样式文件中的相互引用

在一个样式文件中可以引用另一个样式文件，这个功能要通过@import指令来完成

@import url(css/other.css)

p {color:red}
.....

这种用法下@import一定要出现在其它样式的定义之前

css规则命名惯例

p {color:red;}

css规则由两部份组成选择符，声明；声明又由两个部分组成一个是属性，另一个是值。声明包含在一对花括号内，每一个声明都以;结尾。

多个选择符共用同一声明
```
h1 {color:red;}
h2 {color:red;}
h3 {color:red;}
```
对于这种重复的劳动css中是有简写的
```
h1,h2,h3 {color:red;}
```
一定要注意多个选择符之间是有,分隔的。
多条规则应用于同一个选择符

如果还想给上面的h3加一个粗体，那么可以这样写
```
h1,h2,h3 { color:red;}
h3 { font-wight:bold;}
```

上下文件选择器

如果想给article 和 aside中的段落分别设置不同的字号；

方法一：通过inline行内样式来设置这个明显太low了

方法二：通过上下文件选择器

上下文件选择器的格式

标签1 标签2 {声明}

其中标签2就是我们要选择的目标，而且只有在标签1是它祖先元素的情况下对会被选中

上下文件选择器中各个标签以空格分隔
例子
```
article p {font-weight:bold;}
```
注意上下文选择器并不要求、article 是 p 直接祖先，不管中间隔着多少层都是没有问题的

特殊的上下文件选择器

由上面的内容可以知道只有目标元素上层存在对应的祖先元素就行，这种粒度还是太大了。

直接祖先 > 目标元素
子选择
```
article > p {color: blue;}
```
也就是说只有article是p的直接祖先的情况下p才会为被设置css属性

同胞元素 + 同胞元素

紧邻同胞选择
```
h2 + p {color:red;}
```
只有h2 后面紧接着的p会被相应属性、并不是所有的p同胞都会被设置
同胞元素 ~ 同胞元素

一般同胞选择
```
h2 ~ p {color:red;}
```
只要h2在p前面、那么p就会设置上对应的属性

通用选择符

* 号表示能用选择符、它可以配置任何元素

通用选择符用法1
```
* {color:red;}
```
把所有的元素的color属性设置为red
通用选择符用法2
```
section * {color:red;}
```
所section元素下的所有元素的color设置为red
通用选择符用法3
```
section * em {color:red;}
```
这名规则的目标是 em 元素，他要位于section 下的所有子元素内

ID和类选择器

ID和类为我们选择元素提供了另类手段，利用它可以不用考虑文档的层次结构；只要在html标记中为元素增加id、class属性

类属性

类属性是html元素中的class属性、body中的任何一个元素都可以增加

类选择器的定义

.class_name {....;}

注意.号之后直接跟类名不能有空格

 <style>
   .specialtext {
     color: red;
     border- 4
   }
 </style>
 .....
<p>this is p1 </p>
<p class="specialtext">this is p2 </p>

带标签的选择器

标签.类名 {...;}

p.specialtext {color:red;}

 <style>
   p.specialtext {
     color: red;
     border- 4
   }
 </style>
 .....
 <span class="specialtext">this is span </span>
 <p class="specialtext">this is p </p>

p 元素而且要带有specialtext类才会被选中

这样做的目的是为了更加精确的选择标签

ID属性

id属性作为元素的唯一标识、同一个id在页面中只能出现一次
ID选择器的定义
```
 <style>
  #id_name {xxx;}
 </style>
```
与class的定义一样，只不过id选择器定义时用的是#号

带标签ID选择器

 <style>
     p#boy {
         color: blue
     }
 </style> 
 
 ... ...
 <p id="boy">this is p</p>

只有id属性为boy并且是p标签的元素才会设置上相应属性

用于导航的id选择器

id也可以用在页内导航中
```
<a href="#boy" >导航到boy元素</a>
```
如果一a的href设置成了 # 号、那么它会返回到页面的顶部

属性选择器

基于html元素的属性进行元素选择

第一种形式

标签名[属性名] { ...;}
```
<style>
     p[title] {color:red;}
</style>
....

<p title="main"></p>
```
属性选择器第一步是定义特定的标签

属性选择器第二步是标签有设置有特定的属性，至于属性的值是什么是无关紧要的
第二种形式

标签名[属性名="属性值"] 第二种形式相比第一种要更加的严格，它要值属性值也等于特定值

伪类

伪类的分类
1. UI伪类
  会在html元素处于某个状态时为该元素应用CSS样式
2. 结构化伪类
  元素存在某种结构化的上下文关系时应用CSS样式
UI伪类

最常见的UI伪类应用场景是链接(a 元素)利用UI伪类，可以为连接赋于不同的样式；
1. 链接伪类
  
  link : 这个时候链接正在等待用户点击
  
  Visited : 用户点击过这个链接
  
  Hover : 鼠标悬停在链接上
  
  Active : 链接正在被点击
  
  例子：
```
a:link {color:red;}
a:visited {color: black;}
```
  : 表示我们定义的是一个伪类选择器
2. UI伪类可以用于任何元素
  
  如当鼠标放在p元素上时把文本设置为蓝色
```
 p:hover {color: blue;}
```
3. focus 伪类
  
  当input得到焦点时，调整input的边框
```
 input: focus {border:1px; solid:blue;}
```
  bootstrap中大概就是这个效果
4. target 伪类
  
  这个可以用于同一个页面下的导航
```
 <a href="#sp_text"></a>
 
 
 ....
 
 <h1 id="sp_text"> this is sp text <h1>
```
  通过上面的代码我们可以通过超链接导航到sp_text、然而有时候由于页面的内容过多，所以sp_text看起来可能并不起眼，也就是说我们还是比较困难找到它在页面的哪个位置
  
  为了解决这个问题我就可以使用target伪类、当我们以页面导航的方式定义到sp_text元素时、它就可以表现出这一情况下才有的特定CSS属性
```
 #sp_text:target {background: eee;color:red;}
```
```
 ....
 <a href="#sp_text">go to sp_text</a>
 
 ....
 
 <h1 id="sp_text">this is sp text </h1>
```
结构化伪类

结构化伪类可以根据标记的结构应用样式
1. first_child ,last_child
  
  first_child 代表一组同胞中的第一个元素 last_child 代表一组同胞中的最后一个元素
  
  把一组span中第一个的color设置为red
```
 <style>
   span:first-child {color:red;}
 </style>  
 
 ... 
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
```
2. nth-child(x)
  
  nth-child(x) 代表一组同胞中的第x个元素
  
  把一组span中第2个的color设置为red
```
 <style>
   span:nth-child(2) {color:red;}
 </style>
 
 ...
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
```

伪元素

有时候我们想选中的东西并不是元素、比较我们想让每一段文字的首字母放大300%；这种选择的粒度不是选中任何一个元素可以解决的; 面对这种选择粒度我就要用到伪元素了。

first-letter

把段落(p)中的首字母放大300%

 p::first-letter {font-size: 300%;}
 
 <p>I well big ...</p>

first-line

选中段落的第一行

before & after

 p.age::before {content: "age: "}
 p.age::after {content: " years."}
 
 <p class="age">25</p>

css总结

怎么看待CSS

CSS规则

为文档增加样式的三种方法

行内样式

嵌入样式

链接样式

样式文件中的相互引用

css规则命名惯例

多个选择符共用同一声明

多条规则应用于同一个选择符

上下文件选择器

上下文件选择器的格式

例子

特殊的上下文件选择器

直接祖先 > 目标元素

同胞元素 + 同胞元素

同胞元素 ~ 同胞元素

通用选择符

通用选择符用法1

通用选择符用法2

通用选择符用法3

ID和类选择器

类属性

类选择器的定义

带标签的选择器

ID属性

ID选择器的定义

带标签ID选择器

用于导航的id选择器

属性选择器

第一种形式

第二种形式

伪类

伪类的分类

UI伪类

结构化伪类

UI伪类

链接伪类

UI伪类可以用于任何元素

focus 伪类

target 伪类

结构化伪类

first_child ,last_child

nth-child(x)

伪元素

first-letter

first-line

before & after