CSS的基础知识（1）

LWT20070526

已于 2023-02-15 08:01:33 修改

阅读量68

点赞数

分类专栏： html 文章标签： css 前端 css3

于 2023-02-14 14:22:42 首次发布

本文链接：https://blog.csdn.net/LWT20070526/article/details/129006084

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.css的简历

css的概述：

css（Cascading Style Sheets，串联样式表）

1.特点

丰富的样式定义
易于使用和修改
多页面应用
层叠
页面压缩

2.css的发展史

css1.0——css2.0——css2.1——css3.0

二.css3语法结构

语法：
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

选择器相当于css样式作用的HTML5的对象大括号则是属性和属性值组成的声明

具体代码:
h2{font-size:20px;color:red;}
font-size是字体大小
color是字体颜色

三.在HTML中引入css样式

1.行内样式（直接写在标签上）

语法：
<标签名 style=“属性1：属性值1；属性2：属性值2；属性3：属性值3；”>

<body>
	<p style="font-size:20px; color:red">段落标签使用的是行内样式</p>
</body>

行内样式是通过标签的属性控制样式的这种方法没有做到结构与表现的分离并且代码也不容易维护没有体现css的优势因此不建议使用

2.内部样式表(单独写在页面中 style标签中)

<head>
	<meta charset="UTF-8">
	<title>style标签语法</title>
	<style>
	   选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
	</style>
</head>

通过内部样式表引入css便于在页面修改样式仅对html5页面有效因此开发一个页面可以选择使用这种方法为html5文件添加css样式但不利于多页面即大型项目的代码复用和维护对表现和样式的分离也不够彻底

3.外部样式表（另外写在 css后缀的文件里）

原理：
将所有的样式放在一个或多个以.css为扩展名的文件中然后在页面中引入外部样式表
引入外部样式表有两种方式分别是链接式和导入式

1.链接外部样式表

语法：

<head>
	<meta charset="UTF-8">
	<title>链接外部样式表</title>
	<link rek="stylesheet" href="style.css" type="text/css"><>
</head>

stylesheet表示一个样式表文件
href相当于地址可以是相对路径也可以是绝对路径
type="text/css 表示链接的外部文件为css样式表
特点：
一个样式表可以应用于多个页面在开发大量相同结构和样式的网站时可以复用css样式代码大大减少了开大人员的工作量也有利于网站的维护

2.导入外部样式表

语法：

```html
<head>
	<meta charset="UTF-8">
	<title>导入外部样式表</title>
	<style>
	@import url("style.css");
	</style>
</head>

一般推荐< link >标签的方式 @import 可以作为补充方法使用
在这里插入图片描述

3.样式优先级

样式优先级遵循“就近原则”谁离相应的代码近谁的优先级就高

四.css选择器

css基础选择器

1.标签选择器

语法：
标签名{“属性1：属性值1；属性2：属性值2；属性3：属性值3；”}

标签选择器最大的优先级就是能快速地为页面中同类型的标签统一样式

2.类选择器

.类名{“属性1：属性值1；属性2：属性值2；属性3：属性值3；”}

类名为HTML5元素的class属性即<标签名 class=“类名”>标签内容</标签名>
当设置了一个类选择器后页面中其他标签想使用相同的样式则直接使用class属性即可

3.id选择器

#id名{“属性1：属性值1；属性2：属性值2；属性3：属性值3；”}

“id名”为html元素的id属性即<标签名id=“id名”>标签内容</id名>
唯一的特点一个也只能有一个相同的id属性（一个页面只能有一个id=“one” 如果有多个就不符合规范）
也只能在页面应用一次具有唯一性

4.3中基础选择器的优先级

id选择器>类选择器>标签选择器

五.ccs3高级选择器

1.层次选择器

后代选择器

后代选择器也称包含选择器用来选择特定元素或元素组的后代将父元素的选择放在前面，对子元素的选择放在后面中间用空格隔开（也就是在后代执行）

子选择器

子选择器仅指它的直接后代也可以理解为子元素的第一个后代

相邻同胞选择器

使用+标识符进行选择

通用兄弟选择器

用于选择某个元素后面的所有兄弟元素使用~标识符进行选择

2.结构伪类选择器

：first-child选择器：用于为父元素的第一个子元素设置样式
：last-child选择器：用于为父元素的最后一个子元素设置样式
：nth-child（n）选择器：用于为父元素的第n个子元素设置样式
：first-of-type选择器：用于选择为父元素下相同类型子元素中的第一个
：last-of-type选择器：用于选择为父元素下相同类型子元素中的最后一个
：nth-of-type（n）选择器：用于选择为父元素下相同类型子元素中的第n个
：nth-child（n）和：nth-of-type（n）是有区别的

3.属性选择器

属性选择器是可以根据元素的属性及属性值来选择元素
E[attr]:选择匹配具有属性attr的E元素
E[attr=val]:选择匹配具有属性attr的E元素，并且属性值为val（val区分大小写）
E[attr^=val]:选择匹配元素E，且E元素定义了属性attr。其属性值是以val开头的任意字符串
E[attr$=val]:选择匹配元素E，且E元素定义了属性attr。其属性值是以val结尾的任意字符串
E[attr*=val]:选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”
字体加粗的css代码为font-weight-bold
在style样式中添加li{display：inline-block;},这行代码是为了页面的排版美观