1. 认识css

css的基本构成：选择符，属性，属性值
例：p{color:#ff0000}
css对大小写不敏感，推荐使用小写
属性与属性值之间用:分开，多个属性用;间隔。
css中注释方式：/* 注释内容 */

2. 放置css的几种方式

内联样式（行内引用）
```
<p style=""></p>
```

内嵌样式（内部引用）

<!doctype html>
<html>
 <title></title>
 <head>
    <style>
    p{
       color:#ff0000;
       fontsize:15px;
    }
    </style>
 </head>
</html>

外联样式（外部引用）

<!doctype html> 
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css文件地址">
  </head>
</html>

3. CSS选择器

(1). 基本选择器

类选择器（class选择器）
- 在css中用.来查找。（类选择器中可以多个属性，用空格分开）
唯一选择器（ID选择器）
- 在css中用#查找。
通配符选择器(*)
- 匹配所有标签
标签选择器
- 根据html中的标签来选择对应的标签名，这个时候该页面的所有该标签都会被选择。

(2). 层级选择器

组合选择器。多个选择器用逗号分开：选择器1，选择器2，选择器3。如：div,p
包含选择器。选择器1 选择器2。表示选择器1包含选择器2。如：div p
子选择器。选择器1>选择器2.表示选择器1的子元素为选择器2.如：div>p
相邻选择器。选择器1+选择器2.表示选择紧贴在选择器1之后的选择器2元素.如：div+p
兄弟选择器。选择器1~选择器2。表示选择器1后面的所有兄弟元素选择器2.如div~p

(3). 属性选择器

属性选择器：就是通过属性名或者属性值来查找某个元素。
名称介绍
- E element 表示元素标签
- ATT attribute 表示属性
- VAL value 表示属性值
标签[属性]
- E[ATT] , 表示匹配所有具备ATT属性的 E元素，不考虑属性值。
- E[ATT=VAL], 匹配所有ATT属性的值等于VAL的E元素。
- E[ATT~=VAL] 匹配所有ATT属性具有多个空格分隔的值，其中一个值等于VAL的E元素。
- E[ATT|=VAL],匹配所有ATT属性具有多个连接分隔符的值，其中一个值以val-开头的E元素，主要用于lang属性。比如：’en-us’,’en-gb’（了解即可）。
- E[ATT^=VAL],属性ATT的值以VAL开头的E元素。
- E[ATT$=VAL],属性ATT的值以VAL结束的E元素。
- E[ATT*=VAL],属性ATT的值包含VAL的E元素。
```
input[type="text"]{
border:1px solid red;
}
```

(4). 结构性伪类选择器

伪元素选择器（不是真正的元素选择）
- E:first-line E元素的第一行
- E:first-letter E元素的第一个字母
- E:before E元素的内容之前
- E:after E元素的内容之后
结构性伪类选择器

（内容待添加）

(5). 状态伪类选择器

:link 设置超链接a在未被访问前的样式
:hover 设置元素在鼠标悬浮时候的样式（适用于所有元素，不限于超链接）
:active 设置超链接被a被激活时的样式（点了鼠标还没放开的时候状态）
:visited 设置超链接a被访问过的样式

(6). 选择器优先级

内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器，优先级1
通配符选择器，优先级0

当包含多种选择器时，需要多种选择器的优先级相加后再做比较.选择器的优先级不会超过最大优先级数量级1000，如果选择器的优先级一样，则使用靠后的样式。
并集（组合）选择器的优先级是单独计算。
如果在样式的最后加上 !important,优先级则为最高，超过内联样式。所以在开发中，尽量避免使用。

4. CSS的基本属性

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

php学习准备内容

2023-03-02 18:03:17