前端小白学习记录-css

再会过去

已于 2022-12-22 20:32:23 修改

阅读量711

点赞数 1

文章标签：前端学习 css

于 2022-11-12 15:29:41 首次发布

本文链接：https://blog.csdn.net/m0_65062252/article/details/127820906

版权

1.HTML-CSS样式表的优先级

当一个HTML元素有一个以上的样式时，作用的优先级如下：

在一个HTML元素内，内联样式优先级最高，会覆盖外部样式和内部样式以及浏览器默认样式
在head里添加的内部样式和引入的外部样式，后添加和引入的优先级高
浏览器默认样式的优先级最低

2.css选择器类别

2.1简单选择器

根据元素名称、ID、类别来选择元素

ID选择器：使用一个HTML元素的id属性来选择一个特定的元素。用【#id名称】表示。id名称不可用数字开头
类选择器：可以选择具有特定的class属性的HTML元素。用【.类名称】表示。class属性可以用多个样式的叠加；如class="样式1 样式2 ......"
分组选择器：选择所有具有相同样式的HTML元素，元素之间用，隔开。
通用选择器：选择页面的所有元素，用*{}设置

以上几种可参照下图

2.2组合选择器

根据元素之间的特定关系来选择

选择器分类	选择器定义语法	例子	例子说明
后代选择器（匹配指定元素后代的所有元素）	element element	div p	选择<div>元素内所有的<p>元素
子选择器	element>element	div>p	选择所有父元素是<div>元素的<p>元素
相邻的兄弟选择器	element+element	div+p
一般兄弟选择器	element~element	div~p

2.3伪类选择器

根据某种状态来选择元素

基本语法为：其他基础选择器:鼠标行为{

常用的伪类选择器	语法	注意： 1.冒号和后面的鼠标行为，没有任何空格，必须连接在一起 2.四个伪类选择器必须按照表格介绍的顺序书写（见表格左边），否则浏览器中部分样式不能实现 3.伪类选择器全部一起使用的情况，主要是应用在超链接上，偶尔也会在其他标签上
鼠标点击前	:link
鼠标点击后(鼠标点击并移开后的样式)	:visited
鼠标悬停（鼠标悬停或划过元素时的样式）	:hover
鼠标点击时（鼠标点击瞬间元素的样式）	:active

2.4伪元素选择器

为一个元素的指定部分设置样式。主要用来设置元素内文本的首字母，首行的样式，或是在元素内容之前或之后插入内容

	作用	注意
::first-letter	文本首个字符添加特殊样式	before和after必须content配合使用
::first-line	文本首行添加特殊样式
::before	元素之前插入内容
::after	元素之后插入内容
::selection	更改选中文本的样式

2.5css属性选择器

根据一个属性或者属性值来选择元素

3.css文本

3.1大小写转换

3.2文本对齐方式和文本间距

文本对齐	方式	语法
水平对齐	水平居左	text-align:left;
	水平居右	text-align:right;
	水平居中	text-align:center;
	文本左右边界一致，每行文本均对齐	text-align:justify
垂直对齐	基线对齐	vertical-align:baseline
	文本顶部对齐	vertical-align:text-top
	文本底部对齐	vertical-align:text-bottom
	下角标对齐	vertical-align:sub
	上角标对齐	vertical-align:super

文本间距	方式	语法
	指定文本第一行缩进	text-indent: 绝对单位（ px）,比如缩进40px 相对单位（em），缩进的宽度为字符宽度的倍数

	行与行之间的高度	推荐使用第二种
	文本中单词的间距	word-spacing:
	元素内部的空白处理	white-space: 常用的值：nowrap:不管包含文本的元素宽度是多少，文本都不会换行，直到遇到<br>标签

3.3css文本装饰

以下介绍的语法可以用：text-decoration:种类，颜色，样式，厚度代替（注意：文本线条装饰值是必须设置的，其他三个可根据需要设定，四个属性顺序可任意）。

去除链接下划线语法：text-decoration:none;

给文本添加线条装饰，可以给文本添加多个线条修饰，语法为：text-decoration-line:种类1 种类2 ...（注意：每个值之间用空格隔开），线条种类如下图：
为装饰线指定颜色，语法为：text-decoration-color:颜色值
为装饰线指定样式，语法为：text-decoration-style:样式；风格值如下图
为装饰线设定线条厚度，语法为：text-decoration-thickness:厚度;厚度属性值如下图：

3.4 css字体

下列所述可直接用上图的语法代替，font-size,font-family必须设置

1.css字体和字号

字体设置，语法为：font-family：字体名称（注意：若定义的字体在电脑中不存在，浏览器会使用默认字体）默认字体亦可以自己定义，语法为：font-family："字体名称1","字体名称2"，...,字体名称n
字号设置，语法为:font-size:值（值可以设置绝对大小（单位为px），相对大小（单位为em，%，rem））。em，%根据父元素计算大小，rem根据根元素计算大小（html文档中html元素是根元素）

字体	字体名称	字体图
英文字体	Serif（有衬线字体）
	Sans-serif（无衬线字体）
	Monospace（单空格字体或等宽字体）
	Cursive（草书字体）
	Fantasy（幻想字体）
常用的中文字体	Microsoft Yahei（微软雅黑应用于win系统）
常用的中文字体	PingFang SC（苹方简应用于Mac系统）

2.css字体风格和样式简写

字体风格	语法	属性
斜体	font-style：	normal 文本正常显示 italic 文本斜体显示 oblique 文本斜体显示（浏览器支持度低）
字体粗细	font-weight	lighter 细体 normal 正常字体 bold 加粗字体 bolder 更粗字体或者直接设置字体的数值：字体粗细的数值有9个：100（lighter）,200,300,400（normal）,500,600,700（bold）,800,900（bolder）
小型大写字母（小一号的大写字母，属性只对英文生效）	font-variant	normal 正常状态 small-caps 小型大写状态

3.css谷歌字体和Icon图

谷歌字体引入方式如下图：

Icon引入方式及使用如下图

3.5css选择器的权重

css选择器优先级：行内样式>ID选择器>类选择器>元素选择器>通用选择器

选择器选择的范围越小，越精确，优先级就越高。

3.6css设置边框

1.边框样式

指定显示什么边框，如下图

当表格单元格相邻边框产生冲突时，优先级：border-style:hidden>border-style:solid>border-style:none

设置元素的上、下、左、右边框样式：border-top-style,border-bottom-style,border-left-style,border-right-style

可以混合简写设置元素的边框样式，如下四种方法（设置的顺序是固定的）：

border-style:dotted solid double,dashed；（顺序依次是：上边，右边，下边，左边，）
border-style:dotted solid double；（顺序依次是：上边，左右边，下边）
border-style:dotted solid；（顺序依次是：上下边，左右边）
border-style:dotted；（顺序依次是：上下左右边）

2.边框宽度

语法：border-width：（可设置单位【px、em】或者使用三个预定义的值：【thin（薄）、medium（中）、thick（厚）】）

宽度也可混合简写设置，用法同边框样式

3.边框颜色

语法：border-color：颜色值或者使用transparent设置透明度

颜色也可混合简写设置，用法同边框样式

可以在border属性中指定border-width,border-style，border-color。语法为：border:5px solid red；

border-style必须设置，其两个可省略；省略后采用1像素、黑色线这两个默认值

4.css列表

在 HTML 中，列表主要有两种类型：

无序列表（<ul>）- 列表项用的是项目符号标记
有序列表（<ol>）- 列表项用的是数字或字母标记

CSS 列表属性使您可以：

为有序列表设置不同的列表项标记
为无序列表设置不同的列表项标记
将图像设置为列表项标记
为列表和列表项添加背景色

list-style-type 属性指定列表项标记的类型，可用的列表标记如下图：
list-style-image 属性将图像指定为列表项标记，语法为： list-style-image: url(图片路径);
list-style-position 属性指定列表项标记（项目符号）的位置，如下：
"list-style-position: outside;" 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。
"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本。
list-style-type:none 属性也可以用于删除标记/项目符号。注意，列表还拥有默认的外边距和内边距。要删除此内容，请在 <ul> 或 <ol> 中添加 margin:0 和 padding:0。
list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性。
设置列表的颜色样式。添加到 <ol> 或 <ul> 标记的任何样式都会影响整个列表，而添加到 <li> 标记的属性将影响各个列表项：

在使用简写属性时，属性值的顺序为：

list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
list-style-position（指定列表项标记应显示在内容流的内部还是外部）
list-style-image（将图像指定为列表项标记）

如果缺少上述属性值之一，则将插入缺失属性的默认值。

5.css背景

属性	描述
background	在一条声明中设置所有背景属性的简写属性。
background-attachment:值值1：fixed（图片固定）值2：scroll（同时滚动）	设置背景图像是固定的还是与页面的其余部分一起滚动（用来声明容器里的背景图片与内容的依附方式）。
background-clip	规定背景的绘制区域。
background-color	设置元素的背景色。
background-image	设置元素的背景图像。
background-origin	规定在何处放置背景图像。
background-position:水平上的对齐方式（left center right）垂直上的对齐方式（top center bottom）	设置背景图像的开始位置。
background-repeat:	设置背景图像是否及如何重复。
background-size：注意：如果此属性应用到简写的background属性里面，需要添加背景图片的位置，即使位置不调整，也要添加 0px 0px这一对值。比如：0px 0px/cover	规定背景图像的尺寸。

6.css轮廓

轮廓	设定的值
outline-style 属性指定轮廓的样式	`dotted` - 定义点状的轮廓。 `dashed` - 定义虚线的轮廓。 `solid` - 定义实线的轮廓。 `double` - 定义双线的轮廓。 `groove` - 定义 3D 凹槽轮廓。 `ridge` - 定义 3D 凸槽轮廓。 `inset` - 定义 3D 凹边轮廓。 `outset` - 定义 3D 凸边轮廓。 `none` - 定义无轮廓。 `hidden` - 定义隐藏的轮廓。
`outline-width` 属性指定轮廓的宽度	thin（通常为 1px） medium（通常为 3px） thick （通常为 5px）特定尺寸（以 px、pt、cm、em 计）
`outline-color` 属性用于设置轮廓的颜色	name - 指定颜色名，比如 "red" HEX - 指定十六进制值，比如 "#ff0000" RGB - 指定 RGB 值，比如 "rgb(255,0,0)" HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)" invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）
`outline` 属性是用于设置以下各个轮廓属性的简写属性：（`outline` 属性可指定一个、两个或三个值。值的顺序无关紧要。）	`outline-width` `outline-style`（必需） `outline-color`
`outline-offset` 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。