CSS基础知识

最新推荐文章于 2024-07-02 11:41:37 发布

ggggyyyyy0928

最新推荐文章于 2024-07-02 11:41:37 发布

阅读量806

点赞数 17

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_54195263/article/details/135541426

版权

一·、CSS基础概念

概念：层叠样式表，定义如何修饰 HTML 标签

格式：

<style>
    选择器{
    样式属性:值;
    样式属性:值
    }
</style>

书写位置：

1.内联样式：直接在标签上去添加style属性

2.内部样式:在head写style标签

3.外部样式:在head通过link标签引入

优先级 !important >内联>内部>外部

二、选择器

优先级：id 选择器 > 类选择器 > 标签选择器。

1.类选择器(class属性)

<标签 class="自定义名字"></标签>
<style>
    .自定义名字{
            样式属性:值;
            样式属性:值;
    }
</style>

一个类名在多个标签里面使用
一个标签里面可以有多个类名(样式叠加效果)

2.id选择器

<标签 id="自定义名字"></标签>
<style>
    #自定义名字{
            样式属性:值;
            样式属性:值;
    }
</style>

一个标签唯一有一个id名

3.标签选择器

<标签></标签>
<标签></标签>
<style>
    标签名{
            样式属性:值;
            样式属性:值;
    }
</style>

4.子选择器

<style>
    .box p{
        color: yellow;
    }
</style>
</head>
<body>
    <div class="box">
        <p>你好</p>
    </div>

5.属性选择器

通过正则的方式去匹配指定属性的元素

E[attr^/$/*=“xx”]

选择元素 E，其中 E 元素的属性是以 xx 开头/结尾/包含的任何字符。

三、背景

`1.background-color`

可以给指定标签元素设置背景色。

2.background-image

背景图片:background-image:url("图片地址")

渐变：径向渐变 radial-gradient(shape, color-stop);

shape 设置渐变的形状，其取值有 circle（圆形）和 ellipse（椭圆）。

color-stop 设置某个确定位置的颜色值。

repeating-radial-gradient(extent-keyword, color-stop);

线性改变：

linear-gradient(side-or-corner|angle, linear-color-stop);

repeating-linear-gradient(side-or-corner|angle, color-stop);

重复性线性渐变是用重复的线性渐变组成的

side-or-corner 是描述渐变线的起始位置，它包含两个关键词：第一个指出水平位置 left or right，第二个指出垂直位置 top or bottom。

angle 是用角度值来指定渐变的方向， 50deg

linear-color-stop 是设置渐变的颜色值。

3.`background-size`

属性可以给背景图设置大小。

固定值:px

百分比:相对于背景区域的百分比

注意：

cover:全覆盖:保持图形纵横比,再完全覆盖

contain:最合适的大小,保持图形的纵横比将图像缩成最时候背景区域的大小

4.background-position

方位(left,right,top,bottom)

百分比 50% 50% (左右,上下)

background-position-x

background-position-y

5.background-repeat

属性是用来设置背景图像是否平铺。

可取值	描述
repeat	背景图像将在垂直方向和水平方向重复（默认值）
repeat-x	背景图像将在水平方向重复
repeat-y	背景图像将在垂直方向重复
no-repeat	背景图像将仅显示一次

四、精灵图

网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。

步骤

background-image

background-position

五、文本属性

属性	可取值	描述
line-height	normal、number、length、%	设置行高
text-indent	length、%	设置文本缩进
text-align	left、right、center、justify、start、end	设置对齐方式
letter-spacing	normal、length	设置字符间距
text-decoration	`text-decoration-line` 设置线的位置，可取值包含：`underline`（下划线）、`overline`（上划线）、`line-through`（中划线）。 `text-decoration-color` 设置线的颜色。 `text-decoration-style` 设置线的样式，可取值包含：`wavy`（波浪线）、`solid`（实线）、`dashed`（虚线）。 `text-decoration-thickness` 设置线的粗细。	设置文本修饰
white-space	normal、pre、nowrap、pre-wrap、pre-line、break-spaces	规定如何处理空白
line-break	auto、loose、normal、strict、anywhere、unset	处理如何断开带有标点符号的文本的行
color		字体颜色
text-shadow	text-shadow: x-offset y-offset blur color; `x-offset` 是沿 x 轴方向的偏移距离，允许负值，必须参数。 `y-offset` 是沿 y 轴方向的偏移距离，允许负值，必须参数。 `blur` 是阴影的模糊程度，可选参数。 `color` 是阴影的颜色，可选参数。
`text-overflow`	设置超长文本省略显示 clip :修剪文本 ellipsis:省略符号来代表被修剪的文本

六、字体属性

1.font

在一个声明中设置所有的字体属性

font-style、font-variant、font-weight、font-size、font-family

2.font-family

设置字体类型

3.font-size

设置字体大小

4.font-weight

设置字体粗细

5.font-style

设置字体风格

七、边框属性

1.边框样式border-style

soild:实线
dashed:虚线
dotted:点线
double:两条边

2.边框大小border-width

3.边框颜色:border-color

4.border: width style clolor;

5.圆角border-radius

八.列表属性

属性	可取值	描述
list-style	list-style-type、list-style-position、list-style-image	在一个声明中设置所有的列表属性
list-style-image	URL、none	设置图像为列表项标志
list-style-position	inside、outside、inherit	设置列表中列表项标志的位置
list-style-type	disc（默认）、circle、square、decimal 等	设置列表项标志的类型

九.伪类

伪类是添加到选择器的关键字，给指定元素设置一些特殊状态，以 : 开头。

1.鼠标悬浮:hover

2.鼠标点击:active

3.标签内容的内部前面:before

.类型名::before {
        content: "必须写";
 }

4.子元素伪类选择器

选择器	描述
E:first-child	选择元素 E 的第一个子元素。
E:last-child	选择元素 E 的最后一个子元素。
E:nth-child(n)	选择元素 E 的第 n 个子元素，n 有三种取值，数字、odd 和 even。注意第一个子元素的下标是 1。
E:only-child	选择元素 E 下唯一的子元素。
E:first-of-type	选择父元素下第一个 E 类型的子元素。
E:last-of-type	选择父元素下最后一个 E 类型的子元素。
E:nth-of-type(n)	选择父元素下第 n 个 E 类型的子元素，n 有三种取值，数字、odd 和 even。
E:only-of-type	选择父元素唯一的 E 类型的子元素。
E:nth-last-child(n)	选择所有 E 元素倒数的第 n 个子元素。
E:nth-last-of-type(n)	选择所有 E 元素倒数的第 n 个为 E 的子元素。

5.UI伪类选择器

通过元素的状态来选择的一种选择器。

选择器	描述
:focus	给获取焦点的元素设置样式。
::selection	给页面中被选中的文本内容设置样式。
:checked	给被选中的单选框或者复选框设置样式。
:enabled	给可用的表单设置样式。
:disabled	给不可用的表单设置样式。
:read-only	给只读表单设置样式。
:read-write	给可读写的表单元素设置样式。
:valid	验证有效。
:invalid	验证无效。