CSS基础概念（已全部更新完成.........）

已于 2023-01-05 12:52:14 修改

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

于 2023-01-02 10:56:36 首次发布

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础概念（已全部更新完成.........）

css基础概念
复制链接

扫一扫

CSS基础概念（已全部更新完成.........）

一概述

（1）定义：层叠样式表，修饰，HTML元素、字体、段落、表格、表单

（2）w3c：万维网联盟

（3）css功能：修饰颜色字体、布局、特效、动画、响应式布局

（4）css使用场景：pc端网页、手机端网页、混合型手机app网页

（5）css版本：css1 1996年12月17日、css2 1999年1月11日、css3版本推广使用

（6）css编写规范：HTML代码和css分离、小写、注释，缩减、命名规范

二CSS的使用

（1）内联样式

利用HTML标记的style内置属性

<p style="color :red"></p>

特点：只能修饰针对标记，重用性无

（2）嵌入式样式

利用网页中style标记完成

<head> <style>p{color:blue} </style></head>

HTML代码和CSS代码耦合性高，重用性差

（3）外联样式

将HTML文件和CSS代码文件分离，从外部连接

特点：耦合性弱，重用性高

1、定义CSS文件 test.css p{color:red}

2、调用CSS文件<link rel="stylesheet" type="text/css" href="text.css"/>

rel表示层叠样式表 type表示文本类型 href表示链接文件地址

（4）导入样式

将html文件和css代码文件分离，从外部连接

特点：重用性高，在浏览器解析html网页时，在加载css，会出现短暂空白

1、定义css文件 test，css p{color：red}

2、调用文件<style>@import url("test2.css")</style>

三CSS语法

（1）组成

选择器、属性、属性值取值和单位、注释：/注释内容/

语法规则：!important:定义优先级，优先级大，div{color:red!important}、@import、@charset

继承：子标签继承父标签

继承属性：颜色类属性、文本类属性、列表类属性

（2）属性

属性和属性值之间是有冒号：，不同属性是用分号；

p{color：red；font-size：3px}

（3）约定

忽略大小写，不区别大小写

多重声明：同一个标记被不同位置的css样式修饰

四CSS取值单位

（1）长度单位

绝对单位:cm、mm、in、pc、pt、px

相对单位：em、rem、%：参考物是父类容器

（2）颜色单位

英文字母：red/blue/green/white/black/yellow…

十六进制：#aa22cc 常用

RGB（red,green,blue）：取值是0-255

RGBA(red,green,blue,透明度),red/green/blue取值是0-255，透明度是0-1，趋势很好

hsl（色调，饱和度，亮度）：色调是在0-360之间，饱和度与亮度在0-1

（3）文本单位

继承：inherit，默认情况下继承

不继承：initial

<div style="color:red"><div style="color:inherit">继承</div><div style="color:initial">不继承</div></div>

五 CSS选择器

（1）寻找HTML元素，并对其修饰

（2）标记选择器

利用html标记名称，选择并修饰

常用标记，p、li、form、table、td、div

标记选择器只针对统一名称标记

p{color：red；}

（3）类选择器

将html标记进行分组，不同组具备不同的样式

类选择器可以重用，可以跨越标记

声明：.class1{ color ：blue；} <p class=“class1”></p>

（4）ID选择器

利用HTML元素的id，id是唯一

id选择器重用性低

声明： #div1{ width：300px；height：400px；}<div id=“div1”></div>

（5）选择器分组

不同选择器（标记、id、类）具有同一个样式属性

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

例子：p，class，#sty1{color：red；}

（6） 派生选择器

利用html层级关系，作用他子类的所有标记（包含隔代标记）

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

例子：div p{color：red；}

（7）子元素选择器

利用html层级关系，作用他子类的直接子标记（不包含隔代标记）

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

`<p style="color :red"></p>`

`<head> <style>p{color:blue} </style></head>`

2、调用CSS文件`<link rel="stylesheet" type="text/css" href="text.css"/>`

2、调用文件`<style>@import url("test2.css")</style>`

语法规则：!important:定义优先级，优先级大，`div{color:red!important}`、`@import`、`@charset`

`p{color：red；font-size：3px}`

`<div style="color:red"><div style="color:inherit">继承</div><div style="color:initial">不继承</div></div>`

`p{color：red；}`

声明：`.class1{ color ：blue；} <p class=“class1”></p>`

声明： `#div1{ width：300px；height：400px；}<div id=“div1”></div>`

例子：`p，class，#sty1{color：red；}`

（6）派生选择器

例子：`div p{color：red；}`

例子：`div>ul>li>p{color：red }`

（8）属性选择器

1、直接利用属性：`p[name]{color:red}<p name="p1"></p>`

2、利用内置属性数量：`p[id]{align}<p id="p2" align="left"></p>`

3、利用内置属性和属性值：`p[align="center"]<p align="center" name="n1"></p>`

4、组合`p[align="center"][name]<p align="center" name="n2"></p>`

例子：`li：hover{color：red：}`

`firset-letter，第一个字符 p：：first-letter{font-size：45px；}`

`first-line，第一行样式 p：：first-line{color：blue}`

`before在元素前插入字符 p：：before{content：“你好”}`

`after在元素后插入字符 p：：after{contenr：“你好”}`

（12）选择器优先级

`*{text-align：centr}`

例子：`div{clear：both；}`

例子：`p{overflow：auto；}`

七：例子：`div{position：absolute；left：20px；top：10px；}`