【CSS学习记录-2】：选择器与常见属性

十里连城

已于 2022-07-23 17:28:30 修改

阅读量207

点赞数

分类专栏： CSS 文章标签： css 学习前端

于 2022-07-22 21:38:47 首次发布

本文链接：https://blog.csdn.net/qq_46808737/article/details/125940273

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

【前提】CSS组成：选择器{样式}

一、选择器

【作用】：选择特定标签

1，单选择器：

选择器类型	格式	选择标签	备注
标签选择器	p{...}	选择所有p标签	-
类选择器	.cls{...}	选择类名定义为cls的标签<p....class='cls'>	① 可以将具有相同特性的标签设置为同一个类，通过类选择器选择 ② 类封装属性：一个标签可以有多个类名，即一个标签可以通过多个类选择器选择。类名之间通过空格隔开。
ID选择器	#id{...}	选择ID定义为id的标签<p....ID = 3>	ID相当于主键，具有唯一性
通配符选择器	*{...}	选择所有的标签，一般用于最开始处理	场景：CSS最开始，用于取消内、外边界

2，复合选择器

【原理】：通过不同的组合方式组合子标签

类型	格式	选择标签
后代选择器	父标签子标签{...}	选择父盒子中的后代（儿子、孙子...）子标签
子选择器	父标签 > 子标签{...}	选择父盒子的亲儿子标签
并集选择器	标签1，标签2，标签3...{...}	选择标签1~n

3，伪类选择器

1，作用：伪类选择器可以向某些标签（如<a>）添加特殊的效果，常见的为类选择器有链接伪类，结构伪类。

2，链接伪类（love hate）

a:hover	选择鼠标经过的链接
a:link	选择a标签未被访问的连接
a:visited	选择a标签已被访问的链接
a:activate	选择按下未松开的链接

【开发】：一般使用时，只需定义一个a标签的基本样式+鼠标hover即可

3，focus结构伪类

input:focus{...}    #选择表单中鼠标经过的行

二、属性

1，字体

【复合写法】font: style weight font-size/line-height（行高） family

（1）其他可省略，但必须保留字号以及字体，常见写法

{font: 16px 'microft Yahei'; }

（2）单一字体属性：

字体属性	值	备注
font-size（字号）	16px
font-family（字体）	字体名	可以列出多个字体名，从前往后选
font-weight（字体粗细）	变细 400 变粗	无单位
font-style（字体样式）	italic（斜体）

2，文本

文本属性	值	备注
color（文本颜色）	颜色，rgb，rgba（r,g,b,透明度）
text-align（文本对齐方式）	left/right/center	本质是让标签中的盒子对齐
text-indent（文本缩进）	none/underline/overline/line-through	常用text-indent: none消除链接中的下划线
text-decoration（文本修饰）	2em	em为字体的相对单位，表名缩进两个字体大小
line-height（行间距）	px	① 行间距 = 上间距+文本高度+下间距 ② 文字垂直居中：让行间距 = 盒子高度（上下间距到中间）

（1）行间距模型

（2）文字居中：

p {
    width: 200px;
    height: 40px;
    line-height: 40px;        //行高 = 盒高，垂直居中
    text-align: center;       //水平居中
}

3，背景

【复合写法】：background：颜色图片地址平铺滚动/固定位置

背景属性	值	备注
background-color（背景颜色）	颜色，transparent（透明），rgb，rgba（增加透明度a）	-
background-image（背景图片）	url（）	① 使用场景：背景图，装饰性插入图片，精灵图 ② 插入图片：可以使用该方法插入装饰性图片，插入后更加方便的调位置，大小
background-repeat（是否平铺）	no-repeat/repreat/repreat-x/repreat-y/	如果图片大小小于盒子大小，那么图片将会复制平铺，直到铺满整个盒子
background-position（背景位置）	background：x，y	关于x，y有两种单位，方向单位、精确单位。同时也可以使用二者的混合单位。
background-attachment（背景滚动）	scroll（滚动） / fixed（固定）	图像随内容滚动/不滚动

（1）关于背景img位置：background：x，y

① 方向单位：left/center/right ，top/center/bottom（无顺序，可缺省，缺省值为center）

div{
    background-image: url(...);
    background-position: left center ;         //靠左，垂直居中
}

② 精确单位：px / 百分数

div{
    background-image: url(...);
    background-position: 20px,20px ;         //上，左
}

③ 可以使用混合单位

（2）图像填满盒子

.father{...}
#设置高宽为100%，铺满盒子
.father img{
    width: 100%;
    height: 100%;
}

（3）精灵图：

【作用】：将小图标合并成为一张大图片，减少传输次数

4，盒子阴影 / 文字阴影：

   box-shadow ： 水平位置移动    竖直位置移动    虚实（blur-虚）    尺寸   颜色（rgba）
   text-shadow ：水平位置移动    竖直位置移动    虚实（blur-虚）    尺寸   颜色（rgba）

5，元素的显示与隐藏

【本质】让某个元素在页面内显示或隐藏，常搭配JavaScript做特效

属性	特点
display: none（隐藏对象） display: block（显示对象）	脱标，隐藏对象后不再占用原有位置
visibility: hidden（隐藏对象） visibility: block（显示对象）	隐藏对象后仍占用原有位置
overflow: visiable（溢出显示） overflow: hidden（溢出隐藏） overflow: scroll（增加滚动条） overflow: auto（需要时增加滚动条）	① 溢出：文本内容超出盒子大小 ② 关于溢出只需要记住使用overflow:auto即可