CSS3笔记+案例

最新推荐文章于 2022-10-28 10:25:12 发布

????????

最新推荐文章于 2022-10-28 10:25:12 发布

阅读量271

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/lan_baobao/article/details/105080872

版权

文章目录

一、CSS简介

1、什么是CSS

CSS：Cascading Style Sheet 层叠样式表

是一组样式设置的规则，用于控制页面的外观样式

2、为什么使用CSS

实现内容与样式的分离，便于团队开发
样式复用，便于网站的后期维护
页面的精确控制，让页面更精美

3、CSS作用

页面外观美化
布局和定位

二、基本用法

1、CSS语法

    <head>
    	<style>
    		选择器{
    
    			属性名：属性值;
    			属性名：属性值;
    		}
    	</style>
    </head>

选择器：要修饰的对象（东西）
属性名：修饰对象的哪一个属性（样式）
属性值：样式的取值

2、CSS应用方式

也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式

2.1 内部样式

也称为内嵌样式，在页面头部通过style标签定义

对当前页面中所有符合样式选择器的标签都起作用

2.2 行内样式

也称为嵌入样式，使用HTML标签的style属性定义

只对设置style属性的标签起作用

2.3 外部样式

使用单独的.CSS文件定义，然后在页面中使用link标签或 @import指令 引入

使用 link标签 链接外部样式文件

    <link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

提示：type属性可以省略

@import指令 导入外部样式文件

    <style>
    	@import "CSS样式文件路径";
    	@import url(CSS样式文件路径);
    </style>

hello.css
2、CSS应用方式

三、选择器

1、基础选择器

1.1 标签选择器

也称为元素选择器，使用HTML标签作为选择器的名称

以标签名作为样式应用的依据

1.2 类选择器

使用自定义的名称，以.号 作为前缀，然后再通过HTML标签的class属性调用类选择器

以标签的class属性作为样式应用的依据

注意事项：

调用时不能添加.号
同时调用多个类选择器时，以 空格 分隔
类选择器名称不能以数字开头

1.3 ID选择器

使用自定义名称，以#作为前缀，然后通过HTML标签的id属性进行名称匹配

以标签的id属性作为样式应用的依据，一对一的关系
03.基础选择器

2.复杂选择器

2.1 复合选择器

标签选择器和类选择器，标签选择器和ID选择器，一起使用

必须同时满足两个条件才能应用样式

2.2 组合选择器

也称为集体声明

将多个具有相同样式的选择器放在一起声明，使用逗号隔开

2.3 嵌套选择器

在某个选择器的内部再设置选择器，通过空格进行隔开

只有满足层次关系最里层的选择器所对应的标签才会应用样式

注：使用空格时不区分父子还是后代，使用CSS3中新增的>时必须是父子关系才行
04.复杂选择器
04.复杂选择器(续)

2.4 伪类选择器

根据不同的状态显示不同的样式，一般多用于a标签

四种状态：

link未访问的链接
viisited已访问的链接
hover鼠标悬停到链接上，即移动在链接上
active 选定的链接

注：默认链接为：蓝色，下划线
05.伪类选择器

2.5 伪元素选择器

first-letter为第一个字符添加样式

first-line为第一行添加样式

before在元素内容的最前面添加内容，需要配合content属性使用

after在元素内容的最后面添加内容，需要配合content属性使用

06.伪元素选择器

3.选择器的优先级

3.1 优先级

行内样式>ID选择器>类选择器>标签选择器

原因：首先加载标签选择器，再加

最低0.47元/天解锁文章

????????

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3笔记+案例

一、CSS简介1、什么是CSSCSS：Cascading Style Sheet 层叠样式表是一组样式设置的规则，用于控制页面的外观样式2、为什么使用CSS实现内容与样式的分离，便于团队开发样式复用，便于网站的后期维护页面的精确控制，让页面更精美3、CSS作用页面外观美化布局和定位二、基本用法1、CSS语法 <head> <sty...
复制链接

扫一扫