css样式、选择器

ゝ一纸荒年。 2024-04-06 11:33 76阅读 0赞

**目录**

一、css语法

二、css样式

1、行内样式：

2、内部样式：

3、外部样式：

三、css选择器基本选择器

1、标签选择器

2、类选择器

3、id选择器

4、通配符选择器

5、层次选择器

6、结构伪类选择器

7、属性选择器

--------------------

css概念：Cascading Style Sheet 级联样式表

表现HTML或XHTML文件样式的计算机语言

包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

**css的优势：**

1、内容与表现分离

2、网页的表现统一，容易修改

3、丰富的样式，使得页面布局更加灵活

4、减少网页的代码量，增加网页的浏览速度，节省网络带宽

5、运用独立于页面的CSS，有利于网页被搜索引擎收录

### 一、css语法 ###

语法：

选择器{声明1；声明2.....}
    h1为选择器 color为属性 red为值 font-size为属性 14px为值 
    h1{
        color:red;
        font-size:14px;
    }

CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上

### 二、css样式 ###

#### 1、行内样式： ####

使用style属性引入css样式

语法：

<h1 style="color:red;">style属性的应用</h1>
 直接在标签中设置的样式

#### 2、内部样式： ####

CSS代码写在<head>的<style>标签中

语法：

#### 3、外部样式： ####

CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表，有两种方式：链接式和导入式

链接式语法：

引入方式[优先级][Link 1]

行内样式>内部样式/外部引入

就近原则：哪一种设置方式距离元素最近，谁的优先级更高；

### 三、css选择器基本选择器 ###

#### 1、标签选择器 ####

标签选择器：HTML标签作为标签选择器的名称，按标签名称分类，为页面中某一类标签指定统一css样式

语法：

p为html标签 color为属性 red为值 font-size为属性 14px为值 
    p{
        color:red;
        font-size:14px;
    }

#### 2、类选择器 ####

类选择器：如果选择差异化不同的标签一个或几个，可以用类选择器

语法：

.choose为类名称 color为属性 red为值 font-size为属性 14px为值 
 .choose{
 color:red;
 font-size:14px;
 .......
 }
 
 	类选择器

多类名使用方式

在标签class属性中可以写多个类名；多个类名之间必须用空格分开；这样标签就可以分别具有这些类名的样式；节省css代码，方便统一修改在布局比较复杂的情况下，使用的较多

注意：

1、类选择器使用 “.” （英文标点）后跟着类名（类名自定义）

2、长名或词组用横线（-）连接命名

3、不要用纯数字或中文命名；尽量用英文名声

4、命名要见名知意

#### 3、id选择器 ####

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素可以以id属性设则id选择器，css中id选择器以“\#”来定义

语法：

#demo{
 color:red;
 font-size:14px;
 ......
 }
 
 	类选择器

注意：id属性只能在每个HTML中出现一次。

id选择器与类选择器的区别：

1、类选择器可以有多个名字，可以同时被多人使用

2、id选择器和身份证一样，是唯一的不能重复

3、类选择器在修改样式中使用较多，id选择器一般用于页面唯一性的元素上，长于JavaScript搭配使用

#### 4、通配符选择器 ####

在css中，通配符选择器使用“\*”定义，他表示选取页面中所有的元素

语法：

*{
        属性1：属性值1;
        .....
    }

通配符选择器不需要调用，自动给所有元素使用样式，特殊情况下使用

#### 5、层次选择器 ####

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>选择器</td> 
 <td>类型</td> 
 <td>功能描述</td> 
 </tr> 
 <tr> 
 <td> E F </td> 
 <td> 后代选择器 </td> 
 <td> 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 </td> 
 </tr> 
 <tr> 
 <td> E&gt;F </td> 
 <td> 子选择器 </td> 
 <td> 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 </td> 
 </tr> 
 <tr> 
 <td> E+F </td> 
 <td> 相邻兄弟选择器 </td> 
 <td> 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 </td> 
 </tr> 
 <tr> 
 <td> E~F </td> 
 <td> 通用兄弟选择器 </td> 
 <td> 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 </td> 
 </tr> 
 </tbody> 
</table>

后代选择器：

语法：

ol li{
 	color: red;
 }
 <ol>
 	<li>123456</li>
 	<li>123456</li>
 	<li>123456</li>
 	<li>123456</li>
 	<li>123456</li>
 </ol>

子选择器：

语法：

ol li{
 	color: red;
 }
 <ol>
 	<li>123</li>
 	456
 	<li>123456</li>
 	<li>123456</li>
 	<li>123456</li>
 </ol>

相邻兄弟选择器：

语法：

li+span {
 	color: red;
 }
 <ol>
 	<li>123</li>
 	456
 	456
 	<li>123456</li>
 	<li>123456</li>
 </ol>

通用兄弟选择器：

语法：

li~span {
 	color: red;
 }
 <ol>
 	<li>123</li>
 	456
 	456
 	<li>123456</li>
 	<li>123456</li>
 </ol>

#### 6、结构伪类选择器 ####

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>选择器</td> 
 <td>功能描述</td> 
 </tr> 
 <tr> 
 <td> E:first-child </td> 
 <td> 作为父元素的第一个子元素的元素E </td> 
 </tr> 
 <tr> 
 <td> E:last-child </td> 
 <td> 作为父元素的最后一个子元素的元素E </td> 
 </tr> 
 <tr> 
 <td> E F:nth-child(n) </td> 
 <td> 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd </td> 
 </tr> 
 <tr> 
 <td> E:first-of-type </td> 
 <td> 选择父元素内具有指定类型的第一个E元素 </td> 
 </tr> 
 <tr> 
 <td> E:last-of-type </td> 
 <td> 选择父元素内具有指定类型的最后一个E元素 </td> 
 </tr> 
 <tr> 
 <td> E&nbsp;F:nth-of-type(n) </td> 
 <td> 选择父元素内具有指定类型的第n个F元素 </td> 
 </tr> 
 </tbody> 
</table>

示例：

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title>css练习</title>
 		<link href="css-demo1.css" type="text/css" rel="stylesheet"/>
 	</head>
 	<body>
 		12345
 		12345
 		12345
 		<ol>
 			<li class="blue">12345</li>
 			<li>12345</li>
 			<li class="red">12345</li>
 			<li>12345</li>
 			<li>12345</li>
 		</ol>
 		<ul>
 			<li>12345</li>
 			<li class="green">12345</li>
 			<li>12345</li>
 			<li class="blue">12345</li>
 			<li>12345</li>
 		</ul>
 		
 	</body>
 </html>

css：

ul li:first-child{
    	color: red;
    }
    ol li:last-child{
    	color: red;
    }
    ol li:nth-child(3){
    	color: red;
    }
    p:first-of-type{
    	color: red;
    }
    p:last-of-type{
    	color: red;
    }
    ul li:nth-of-type(3){
    	color: red;
    }

#### 7、属性选择器 ####

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>属性选择器</td> 
 <td>功能描述</td> 
 </tr> 
 <tr> 
 <td> E[attr] </td> 
 <td> 选择匹配具有属性attr的E元素 </td> 
 </tr> 
 <tr> 
 <td> E[attr=val] </td> 
 <td> 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写） </td> 
 </tr> 
 <tr> 
 <td> E[attr^=val] </td> 
 <td> 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串 </td> 
 </tr> 
 <tr> 
 <td> E[attr$=val] </td> 
 <td> 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串 </td> 
 </tr> 
 <tr> 
 <td> E[attr*=val] </td> 
 <td> 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配 </td> 
 </tr> 
 </tbody> 
</table>

示例：

<!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title></title>
 		<link href="css/demo02.css" rel="stylesheet" type="text/css"/>
 	</head>
 	<body>
 		<ul>
 			<li>第一组</li>
 			<li class="blue">第二组</li>
 			<li>第三组</li>
 			<li id="red" class="blue">第四组</li>
 			<li x="lx">第五组</li>
 			<li>第六组</li>
 			<li x="cdscz">第七组</li>
 			<li>第八组</li>
 			<li>第九组</li>
 			<li x="l10x">第十组</li>
 		</ul>
 		
 			这是一个段落
 		
 		<a x="adx" href="http://www.baidu.com">百度一下</a>
 	</body>
 </html>

#red{
    	color: red;
    	text-decoration: underline;
    	font-size: 24px;
    }
    
    li{
    	color: green;
    }
    
    .blue{
    	color: blue;
    }
    
    [x*=d]{
    	color: red;
    }

[Link 1]: https://so.csdn.net/so/search?q=%E4%BC%98%E5%85%88%E7%BA%A7&spm=1001.2101.3001.7020