CSS入门知识整理（一）

深藏阁楼爱情的钟 2022-10-29 07:31 160阅读 0赞

**记录不是首要目的，只是想回顾一下学习的内容~**  
（标签左右多了空格不是我有毛病，是编辑器这样做才能显示）

1.CSS简介  
Cascading Style Sheets 层叠样式列表

2.CSS作用

*  结构与样式分离的方式，便于后期维护和改版
 *  可以用多套样式，使网页有任意样式切换的效果
 *  使页面载入得更快，降低服务器的成本

3.CSS样式表分类：外部（单独一个css文件）、内部（在html里一起使用）、行内样式。

4.CSS样式文件结构：

p{
        
    	background-color: red;
    	font-size: 20px;
    }
    
    p是样式选择器、background-color: red; 分别是属性、分隔符、属性值。

5.常用选择器：标签选择器、类选择器（class）等。

类选择器定义

定义：
    < p class="p1" >嘤嘤嘤< /p >
    
    使用：
    .p1{
        
    	属性：属性值
    }

6.背景样式

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>background-color</td> 
   <td></td> 
   <td>背景颜色</td> 
  </tr> 
  <tr> 
   <td>background-image</td> 
   <td></td> 
   <td>背景图片</td> 
  </tr> 
  <tr> 
   <td>background-repeat</td> 
   <td>repeat、repeat-x、repeat-y、no-repeat</td> 
   <td>背景图片的重复方向</td> 
  </tr> 
  <tr> 
   <td>background-attachment</td> 
   <td>scroll、fixed</td> 
   <td>是否随滚动条滚动</td> 
  </tr> 
  <tr> 
   <td>background-position</td> 
   <td></td> 
   <td>背景图定位</td> 
  </tr> 
  <tr> 
   <td>background</td> 
   <td>背景样式的值是复合属性值的组合</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

position:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70]

7.外部样式：使结构层和表示层分离  
示例：< link rel = “stylesheet” type = “text/css” href = “index.css” >(除了link还可用其他链接）  
link：定义文档与外部资源的关系。  
rel：relationship 关系。  
type：文件类型，此处可以省略，目前link基本都是用于链接css。  
href：指定文件。

8.颜色表  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 1]

9.文本样式

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>direction</td> 
   <td>rtl 右对齐，ltr左对齐</td> 
   <td>文本对齐</td> 
  </tr> 
  <tr> 
   <td>letter-spacing</td> 
   <td>npx（n可为负值）</td> 
   <td>字符间距</td> 
  </tr> 
  <tr> 
   <td>line-height</td> 
   <td>npx</td> 
   <td>行高</td> 
  </tr> 
  <tr> 
   <td>text-align</td> 
   <td>left、right、center、justify(两段对齐)</td> 
   <td>文本分布</td> 
  </tr> 
  <tr> 
   <td>text-decoration</td> 
   <td>none、underline、overline、line-through</td> 
   <td>下划线</td> 
  </tr> 
  <tr> 
   <td>text-shadow</td> 
   <td>h-shadow（行坐标）、v-shadow（列坐标）、blur（阴影程度，npx，越大越糊）、color（颜色）</td> 
   <td>文本设置阴影</td> 
  </tr> 
  <tr> 
   <td>text-indent</td> 
   <td>npx、nem（字符距离）</td> 
   <td>首行缩进</td> 
  </tr> 
 </tbody> 
</table>

10.字体样式：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>font-family</td> 
   <td>隶书、仿书</td> 
   <td>字体</td> 
  </tr> 
  <tr> 
   <td>font-size</td> 
   <td>normal、italic、oblique</td> 
   <td>大小</td> 
  </tr> 
  <tr> 
   <td>font-weight</td> 
   <td>normal、bold</td> 
   <td>粗细</td> 
  </tr> 
  <tr> 
   <td>font-style</td> 
   <td>npx</td> 
   <td>斜体</td> 
  </tr> 
 </tbody> 
</table>

11.列表样式

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>list-style-type</td> 
   <td>none、disc、circle、square、decimal</td> 
   <td>设置列表项目的外观</td> 
  </tr> 
  <tr> 
   <td>list-style-position</td> 
   <td>inside、outsize（靠的远）</td> 
   <td>列表符号位置</td> 
  </tr> 
  <tr> 
   <td>list-style-image</td> 
   <td>url、none</td> 
   <td>把图像设置为列表项目的标记</td> 
  </tr> 
  <tr> 
   <td>list-style</td> 
   <td></td> 
   <td>复合属性值组合</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 2]

1.  伪类：通常情况，超级链接上设置的样式，称为伪类。  
    tips：伪类是用在超链接上的效果比较多，但超链接不是伪类。 伪类是选择器。  
    伪类选择器：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>a:link</td> 
   <td>未访问的链接</td> 
  </tr> 
  <tr> 
   <td>a:visited</td> 
   <td>已访问的链接</td> 
  </tr> 
  <tr> 
   <td>a:hover</td> 
   <td>鼠标移动到链接上（浮动、悬停）</td> 
  </tr> 
  <tr> 
   <td>a:active</td> 
   <td>向被激活的元素添加样式</td> 
  </tr> 
  <tr> 
   <td>:focus</td> 
   <td>选择拥有键盘输入焦点的元素</td> 
  </tr> 
 </tbody> 
</table>

示例：

定义：
    <a href="#">伪类</a>
    
    使用：
    a:link{
        
    	color:red;
    }
    a:visited{
        
    	color: green;
    }
    a:hover{
        
    	color: yellow;
    	font-size: 30px;
    }
    a:active{
        
    	color:blue;
    }

a:link未访问时为红色  
![在这里插入图片描述][20210209141414162.png]  
a:hover鼠标悬停时为黄色  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 3]  
a:active 点击激活时为蓝色  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 4]  
a:visited 访问过后为绿色。  
![在这里插入图片描述][20210209141607713.png]

1.  伪类的分类：上面的内容是状态伪类，下面的为结构性伪类。

14.结构性伪类：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:first-child</td> 
   <td>选择元素的第一个子元素</td> 
  </tr> 
  <tr> 
   <td>:last-child</td> 
   <td>选择某个元素的最后一个子元素</td> 
  </tr> 
  <tr> 
   <td>:nth-child（）</td> 
   <td>选择某个元素的一个或多个特定的子元素</td> 
  </tr> 
  <tr> 
   <td>:nth-last-child()</td> 
   <td>选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算</td> 
  </tr> 
  <tr> 
   <td>:first-of-type</td> 
   <td>选择一个上级元素下的第一个同类子元素</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
    	
    	<p>ddd</p>
    	<p>kkk</p>
    	<p>fff</p>
    	<h1>嘤嘤嘤</h1>
    	<table border="1" width="500px">
    	  <tr>
    		<td>1</td>
    		<td>1</td>
    		<td>1</td>
    		<td>1</td>
    	  </tr>
    	  <tr>
    		<td>1</td>
    		<td>1</td>
    		<td>1</td>
    		<td>1</td>
    	  </tr>
    	  <tr>
    		<td>1</td>
    		<td>1</td>
    		<td>1</td>
    		<td>1</td>
    	  </tr>
    	</table>
    </body>
    </html>

p:nth-child(2){
        
    	background-color: red;
    }
    
    td:nth-last-child(2){
        
    	background-color: red;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 5]

15.伪元素选择器

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>::selection</td> 
   <td>选中内容</td> 
  </tr> 
  <tr> 
   <td>::before</td> 
   <td>在内容的前面</td> 
  </tr> 
  <tr> 
   <td>::after</td> 
   <td>在内容的后面</td> 
  </tr> 
  <tr> 
   <td>::first-line</td> 
   <td>选择指定选择器的首行</td> 
  </tr> 
  <tr> 
   <td>::first-letter</td> 
   <td>选择文本的第一个字符</td> 
  </tr> 
 </tbody> 
</table>

p::before{
        
    	content: "我是头，";
    }
    /*可以将body也换成h1*/
    body::after{
        
    	content: "我是尾，";
    }
    p::first-line{
        
    	background-color: yellow;
    }
    p::first-letter{
        
    	font-size: 30px;
    }
    p::selection{
        
    	background-color: red;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 6]

16.其他选择器

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>使用:#id{ }</td> 
  </tr> 
  <tr> 
   <td>逗号选择器</td> 
   <td>#id, #id2{ }</td> 
  </tr> 
  <tr> 
   <td>空格选择器</td> 
   <td>也叫后代选择器 #先代 后代{ }</td> 
  </tr> 
  <tr> 
   <td>&gt;选择器</td> 
   <td>只属于自己（子选择器）</td> 
  </tr> 
  <tr> 
   <td>+选择器</td> 
   <td>同级选择器（相邻兄弟选择器）</td> 
  </tr> 
  <tr> 
   <td>[]选择器</td> 
   <td>属性选择器</td> 
  </tr> 
 </tbody> 
</table>

/*子孙选择器*/
    /*#div1 p{
    	color: red;
    }*/
    
    /*子选择器*/
    /*#div1>p{
    	color:red;
    }*/
    
    /*相邻兄弟选择器*/
    /*#div2+div{
    	color: red;
    }*/
    
    /*属性选择器*/
    p[class="p1"]{
        
    	color:red;
    }

17.CSS选择器优先级

从高到低：  
1. ! important  
2. 行内样式  
3. ID选择器  
4. 类选择器  
5. 标签选择器  
6. 通配符  
7. 浏览器默认属性

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70]: /images/20221024/c676e1594d9e4d85958bc328ec168194.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 1]: /images/20221024/9eff19e6d5554ea8a12829c3b5e10b6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 2]: /images/20221024/b89625924d2343f1b4864a2e6dc5bdce.png
[20210209141414162.png]: /images/20221024/338bdf2ef7bc45bf823abaa2f247d5dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 3]: /images/20221024/0cae35a8c8264f57b84412cf5804e68c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 4]: /images/20221024/fc28839e112e4ba1a7f3a6707f1486b6.png
[20210209141607713.png]: /images/20221024/bf6e8b6866db416e8e1730a5f07164c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 5]: /images/20221024/8edd59dc651c45499d4a682493293686.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk1MjczNg_size_16_color_FFFFFF_t_70 6]: /images/20221024/2d7bbaadd8704343b69ea92e3c08b7e7.png