CSS基础总结

原创

已于 2022-03-14 11:22:23 修改 · 2.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

于 2020-03-02 00:53:56 首次发布

1. CSS语法

1.1 行内式(内联样式)

概念：
称行内样式、行间样式.
是通过标签的style属性来设置元素的样式

语法格式：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

注意：

style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。

type=“text/css” 在html5中可以省略。

只能控制当前的页面

1.2 内部样式表(内嵌样式表)

概念：
称内嵌式
是将CSS代码集中写在HTML文档的head头部标签中(理论上他可以放在HTML文档的任何地方)，并且用style标签定义

语法格式：

<head>
<style type="text/CSS">
    选择器（选择的标签） {
   
    
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
}
</style>
</head>

注意：

style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。

type=“text/css” 在html5中可以省略。

只能控制当前的页面

1.3 外部样式表(外链式)

概念：
称链入式
是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中，
通过link标签将外部样式表文件链接到HTML文档中

语法格式：

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

注意：

link 是个单标签

link标签需要放在head头部标签中，并且指定link标签的三个属性

1.4 三种样式表总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签(少)
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面(中)
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点(多)

1.5 语法总结

选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。

属性和属性值以“键值对”的形式出现。

属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。

属性和属性值之间用英文“:”连接。

多个“键值对”之间用英文“;”进行区分。

2. CSS选择器

2.1 选择器的作用

选择标签用的，把我们想要的标签选择出来
css 就是分两件事，选对人，做对事

2.2 CSS基础选择器

2.2.1 标签选择器

作用：可以把某一类标签全部选择出来比如所有的div标签和所有的 span标签

语法：

标签名 {
   
   
	属性1:属性值1; 
	属性2:属性值2; 
	属性3:属性值3; 
}

2.2.2 类选择器

作用：选择出同一类名的元素，可多次重复使用
语法：

.类名  {
   
      
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}

<p class='类名'></p>

注意：
多类名选择器中类名中间用空格隔开

2.2.3 id选择器

作用：选择出某一个具体的元素，不得重复，只能使用一次
语法：

#id名 {
   
   
	属性1:属性值1; 
	属性2:属性值2; 
	属性3:属性值3; 
	}

<p id="id名"></p>

2.2.4 通配符选择器

作用：选择出所有的标签
语法：

* {
   
    
	属性1:属性值1; 
	属性2:属性值2; 
	属性3:属性值3; 
}

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

2.3 CSS复合选择器

2.3.1 后代选择器

作用：用来选择元素或元素组的子孙后代
语法：

父级 子级{
   
   
	属性:属性值;
	属性:属性值;
}

2.3.2 子元素选择器

作用：只能选择作为某元素**子元素(亲儿子)**的元素。
语法：

.class>h3{
   
   
	color:red;
	font-size:14px;
}

2.3.3 交集选择器

作用：两个选择器同时满足。
语法：

h3.class{
   
   
	color:red;
	font-size:14px;
}

2.3.4 并集选择器

作用：多个选择器都执行。
语法：

.class,h3{
   
   
	color:red;
	font-size:14px;
}

2.3.5 链接伪类选择器

作用：用于向某些选择器添加特殊的效果。
语法：

a:link ：未访问的链接
a:visited：已访问的链接
a:hover：鼠标移动到链接上
a:active ：选定的链接

顺序：**lv **包包非常 hao

a:hover {
   
      /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态	用于添加特殊的效果	较多	重点记住 a{} 和 a:hover 实际开发的写法

3. CSS样式

3.1 背景(background)

3.1.1 背景颜色(color)

语法：

background-color:颜色值;   默认的值是transparent：透明的

3.1.2 背景图片(image)

语法：

background-image : none | url (url)

none：无背景图（默认的）
url：使用绝对或相对地址指定背景图像
语法：P.s.：背景图片后面的地址，url不要加引号

3.1.3 背景平铺(repeat)

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

repeat：背景图像在纵向和横向上平铺（默认的）
no-repeat：背景图像不平铺
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向平铺

3.1.4 背景位置(position) ——重点

语法：

background-position : length || leng

最低0.47元/天解锁文章

CSS基础总结

1. CSS语法

1.1 行内式(内联样式)

1.2 内部样式表(内嵌样式表)

1.3 外部样式表(外链式)

1.4 三种样式表总结

1.5 语法总结

2. CSS选择器

2.1 选择器的作用

2.2 CSS基础选择器

2.2.1 标签选择器

2.2.2 类选择器

2.2.3 id选择器

2.2.4 通配符选择器

2.3 CSS复合选择器

2.3.1 后代选择器

2.3.2 子元素选择器

2.3.3 交集选择器

2.3.4 并集选择器

2.3.5 链接伪类选择器

3. CSS样式

3.1 背景(background)

3.1.1 背景颜色(color)

3.1.2 背景图片(image)

3.1.3 背景平铺(repeat)

3.1.4 背景位置(position) ——重点