【CSS】前端学习DAY3知识点小结

Ala_liu

已于 2022-06-06 11:02:49 修改

阅读量131

点赞数

文章标签：前端 css 学习

于 2022-05-24 00:17:35 首次发布

本文链接：https://blog.csdn.net/Ala_liu/article/details/124937946

版权

一. CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来
CSS注释以 /* 开始, 以 */ 结束

二. 选择器

1. id 选择器

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

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义
注意

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>

2.class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用

<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>

3.通配选择器

选中页面中的所有元素
语法：*

4.元素选择器

p{}

5. 交集选择器

作用：选中同时符合多个条件的元素
语法：选择器1选择器2{}
注意点：交集选择器中如果有元素选择器必须使用元素选择器开头
例：
div.red{}

交集选择器

6.并集选择器(选择器分组)

作用：同时选中多个选择器对应的元素
语法：选择器1，选择器2，选择器n{}
例：
.red,#a,h1,span{}

7.关系选择器

子元素选择器
作用：选中指定父元素中的指定子元素(只能选择作为某元素直接/一级子元素的元素。)
语法：父元素>子元素
例子：div > span{}
后代元素选择器
作用：选中指定元素中的后代元素
语法：祖先后代（中间是个空格哦~）
例子：div span{}
兄弟元素选择器
语法: 前一个兄元素+后一个弟元素
作用：选择下一个（离得最近的）兄弟元素
语法: 前一个兄元素~后一个弟元素
作用：选择下面所有兄弟元素

8. 属性选择器

[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性名的元素
[属性名^=属性值]选择以指定属性值开头的元素
[属性名$=属性值]选择以指定属性值结尾的元素
[属性名*=属性值]选择含有指定属性值的元素

9. 伪类选择器

1.

：first-child
：last-child
: nth-child()
括号里面写n就是选中第n个子元素，n的范围是零到正无穷
2n或even选中偶数位的元素，2n+1或odd选中奇数位的元素
例：ul>li:nth-child(2n){color:red;}
说明：以上三类都是根据所有子元素进行排序

2.

：first-of-type
：last-of-type
：nth-of-type()
说明：在同类型元素中进行排序

3.否定伪类

：not()
将符合条件的元素从选择器中去除

4.超链接的伪类

a:link{color:red;}
a:visited{} 出于隐私，visited这个伪类只能修改链接颜色
a:hover{} 鼠标移入
a:active{} 点击链接的瞬间

10.伪元素选择器

表示页面中特殊的并不真实存在的元素（特殊的位置）
伪类用来描述一个元素的特殊状态（特殊的状态）
::first-letter
::first-line
::selection表示给选中的内容设置样式
::before元素的开始
::after元素的最后
说明：::before和::after必须结合content属性一起使用
例：div::before{content’[]'}

三.CSS 创建

1. 如何插入样式表

插入样式表的方法有三种 :
外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

2. 外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

3. 多重样式优先级

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

四.CSS 背景

CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
background-color
background-image
background-repeat (repeat-x/repeat-y)
background-attachment
background-position

五. 文本格式

文本的对齐方式

text-align:center
text-align:right
text-align:justify（每一行被展开为宽度相等，左，右外边距是对齐）

1. 文本修饰

text-decoration:none（除链接的下划线）
text-decoration:overline
text-decoration:line-through
text-decoration:underline

2. 文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
text-transform:uppercase
text-transform:lowercase
text-transform:capitalize

3. 文本缩进

text-indent

4. 所有CSS文本属性

color 设置文本颜色
direction 设置文本方向
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

六.CSS 字体

font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本
font-weight 指定字体的粗细

italic 和 oblique 的区别
一种字体有粗体、斜体、下划线、删除线等诸多属性。
但是并不是所有字体都做了这些，一些不常用的字体，或许就只有个正常体，如果你用 italic，就没有效果了~这时候你就要用 oblique，
可以理解成 italic 是使用文字的斜体，oblique 是让没有斜体属性的文字倾斜！
CSS2.0 上边的解释：italic 和 oblique 都是向右倾斜的文字, 但区别在于 italic 是指斜体字，而 oblique 是倾斜的文字，对于没有斜体的字体应该使用 oblique 属性值来实现倾斜的文字效果。

Ala_liu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS】前端学习DAY3知识点小结

一. CSS 语法CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来CSS注释以 /* 开始, 以 */ 结束二. 选择器1. id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义注意ID属性不要以数字开头，数字开头的ID在
复制链接

扫一扫