CSS基础小结

Yannick_H

已于 2022-04-22 00:46:03 修改

阅读量120

点赞数

分类专栏： Y-Y滴前端日志基本概念（笔记）文章标签： html5 css3

于 2022-04-22 00:37:16 首次发布

本文链接：https://blog.csdn.net/yannick_h/article/details/124332362

版权

Y-Y滴前端日志同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

基本概念（笔记）

31 篇文章 0 订阅

订阅专栏

本文详细解析了CSS3中的结构和表现分离原则，涵盖了CSS的使用方法，包括嵌入式、行内式、链接式和导入式，以及基础选择器、文本样式属性和各类选择器如属性选择器、关系选择器等。深入讲解了HTML标签、ID选择器、类选择器和伪类选择器的应用。

摘要由CSDN通过智能技术生成

3.结构化的伪类选择器(伪类选择器带冒号)

4.伪对象选择器

5.超链接的伪类选择器

一、结构和表现分离

在页面中，使用html搭建页面的结构(页面的内容),不使用标签的属性设置样式，标签的样式全部在CSS中设置

二、CSS

层叠样式表(Cascading Style Sheet)

CSS3是新版本的CSS，与老版本(CSS2.1)相比在性能和成本上有大的提升

三、CSS使用方法使用

1.页面嵌入式

使用<style></style>标签嵌入CSS规则 -- 嵌入式

<style>

      p{

         color: red;

       }

</style>

2.行内容嵌入式

给标签添加style属性 -- 行内式

3.链接式

先创建独立的CSS文件,然后在页面中使用<link>标签链接外部的CSS文件 -- 推荐使用

4.导入式

<style type="text/css">

   @import url(../css/demo.css);

或

@import "../css/demo.css";

</style>

四、样式的定义

选择器{

   属性1：值1；

   属性2：值2；

}

五、CSS的选择器

1.基础选择器

（1）标签名选择器

标签名{

   属性名：值;

 }

（2）id选择器

给标签设置id属性，通过id属性值选择标签。标签的id属性值不能重复

#id属性值{

	属性名: 值;

}

（3）类选择器

给标签设置class属性,通过class属性值选择标签。标签的class属性值可以重复

.class属性值{

	 属性名：值;

}

（4）通配符选择器

通配符(*),可以匹配页面中的任何元素

六、文本样式属性

1.长度单位

（1）相对单位

px	像素，相对于屏幕的分辨率。比较稳定和精确
em	元素的字体高度。相对于父元素的属性值进行计算
rem(root em)	元素字体的高度。参照<html>根元素的字体的大小

ps：通常参照<body>的font-size，任意浏览器的默认字体为16px。1em = 16px

（2）绝对单位

in	英寸，1in = 2.54cm 12英寸 = 1英尺
pt(points)	点，印刷的度量单位.1英寸 = 72pt
cm	厘米
mm	毫米

2.字体样式

font-size	设置字号(文字的大小)
font-family	设置字体。前提(本地机上安装有字体)
font-style	字体样式(斜体)
font-weight	字体的粗(100~900,数值越大字体越粗)
@font-face	设置服务器端字型。是CSS3新增加的样式属性

3.文本样式

color

定义文本的颜色

颜色的表示方式

颜色名	red、blue、green
十六进制样式	#rgb/ #rrggbb 每个颜色分量的取值在0~f之间
函数	rgb(r,g,b) 每个颜色分量的取值在0~255之间
rgba(r,g,b,a)	a代表alpha，设置透明度0.0-1.0之间

letter-spacing	设置子间距(字符和字符之间的距离)
word-spacing	属性用于定义英文单词之间的间距，对中文字符无效
line-height	行高
text-align	内容的对齐方式(left、center、right)

text-transform	控制英文的大小写
none	不做转换
capitalize	单词首字母大写
uppercase	所有字符全部转换成大写
lowercase	所有字符全部转换成小写

text-decoration	设置文本的下划线、上划线、删除线
node	没有装饰
underline	下划线
overline	上划线

text-indent

设置首行文本的缩进

text-shadow

设置文本的阴影效果

p{

  text-shadow:1px 1px 2px rgba(0,0,0,.3);

 }

第一个值：表示水平偏移量。可以为负值

第二个值：表示垂直偏移量。可以为负值

第三个值：表示阴影半径。不能为负值

第四个值：表示阴影的颜色

text-overflow	文本的溢出效果(结合overflow属性使用)
clip	当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉
ellipsis	当对象内文本溢出时显示省略标记（...)
word-wrap	设置长单词和URL地址的自动换行

六、各类选择器

1.属性选择器

E[att]	选择具有att属性的元素
E[att="val"]	选择具有att属性,并且att属性值等于val的元素
E[att~="val"]	选择具有att属性,并且att属性值是用空格隔开的单词,其中一个单词等于val
E[att^="val"]	选择具有att属性,并且att属性值是以val开头的字符串
E[att$="val"]	选择具有att属性,并且att属性值是以val结尾的字符串
*E[att="val"]**	选择具有att属性,并且att属性值中包含val的字符串
E[att\|="val"]	选择具有att属性,并且att属性值是以val开头、以'-'分隔的字符串

2.关系选择器

E F	包含（后代）选择器，选择所有被E包含的F元素
E>F	子元素选择器，选择所有作为E元素的子元素F
E,F	并集选择器，可以多个一起用，用“，”分割，最后一个不用“，”
E+F	相邻元素选择器，选择紧贴在E元素之后F元素
E~F	兄弟选择器，选择E元素后面的所有兄弟元素F

3.结构化的伪类选择器(伪类选择器带冒号)

html:root

根元素选择器。html文档中的根只有一个<html>。样式应用于页面的每个元素

html:root{

   样式属性：值;

}

E:not(选择器)	不包含给定选择器的元素
E:only-child	匹配父元素仅有一个子元素E
E:first-child	匹配父元素的第一个子元素E
E:last-child	匹配父元素的最后一个子元素E
E:nth-child(n)	匹配父元素中第(n)个子元素E
E:nth-last-child(n)	匹配父元素中倒数第(n)个子元素E
E:nth-of-type(n)	匹配同类型中的第n个同级兄弟元素E
E:empty	匹配没有任何子元素的元素E
E:checked	匹配用户界面上处于选中状态的元素E
E:enabled	匹配用户界面上处于可用状态的元素E
E:disabled	匹配用户界面上处于禁用状态的元素E

4.伪对象选择器

E:before(CSS2)	E::before(CSS3)	设置在对象前（依据对象树的逻辑结构）插入的内容。必须和content属性一起使用
E:after(CSS2)	E::after(CSS3)	设置在对象后（依据对象树的逻辑结构）插入的内容。必须和content属性一起使用

5.超链接的伪类选择器

E:link	设置超链接a在未被访问前的样式
E:visited	设置超链接a在被访问后的样式
E:hover	设置元素在其鼠标悬停时的样式
E:active	设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式