CSS初体验（初次写blog，轻点pen&peace&love）-CSDN博客

本文链接：https://blog.csdn.net/weixin_61006312/article/details/127045519

初学者分享

一.css简述

1.什么是css

cascading style sheets （层叠样式表）

2.css作用

定义如何显示HTML元素, 给HTML设置样式。（大俗话：ps页面&美化标签）

二.css的样式规则

1.css使用的具体格式：

选择器{属性1：属性值；属性二：属性值；属性三：属性值}

每个css样式由两个部分组成：选择器和声明

声明又包括属性和属性值，每个声明之后用分号结束。

2.css引入方式：

$\bullet$ 行内样式

<标签名 style="属性1:属性值1;属性2:属性值2;">
    内容
</标签名>

行内样式（内联样式）是将样式定义在每个标签元素中，其默认优先值最高，但是并没有做到结构与表现的分离，所以一般很少使用。

$\bullet$ 内部样式

<head>
    <style type="text/css">
        选择器 {属性1:属性值1;属性2:属性值2;属性3:属性值3}
    </style>
</head>

内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义。

内嵌式CSS样式只是对其所在的HTML页面有效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果是一个网站，不建议使用这种方式，因为它不能充分发挥CSS代码的重用优势。

$\bullet$ 外部样式

<head>
    <link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>

创建一个.css文件，在html中的head标签里，使用link引入。链入式是使用频率最高，也是最实用的CSS样式表。它将HTML代码与CSS代码分离为两个或多个文件，实现了结构和表现的完全分离，使得网页的前期制作和后期维护都十分方便。

ps：导入式：@import url（"文件路径"）将任意文件类型的内容导入到当前文件。

<head>
    <style>
        @import url(./css文件.css)
    </style>
</head>

三.css的样式特性

1.继承性

我们只关注文本样式的继承，

后代元素可以使用父元素的文本样式

文本样式和字体样式的继承

绝大多数文本字体样式，可以被继承

a标签不会继承字体颜色

2.堆叠性

为一个标签定义多个样式规则

如果样式属性不冲突，都会作用到这个标签上

3优先级

如果有冲突，要判断优先级

默认优先级：

高内联样式

中内部样式，外部样式-------就近原则（代码执行顺序）

低浏览器默认样式

f12关于优先级的显示

默认情况下，浏览器中f12中样式是按照默认优先级顺序从高往低显示

ps："!important"可以设置最高优先级，但是行内样式不支持设置!important。

四.基础选择器

选择器规范了页面中哪些元素能够使用当前设置的样式就是一个条件，符合这个条件的元素都可以使用这个样式

1.通用选择器

*{
       color: red;
       background-color: black;
 }
/* 1.通配符选择器: 样式表的最上面，初始化样式*/

可以用于所有元素共用的样式。

2.标签选择器

 /* 标签选择器:该页面的所有div标签 */
        span{
            width: 100px;
            height: 100px;
            background-color: red;
        }

设置页面中对应元素的默认样式。

3.ID选择器

/* 3.id选择器：根据id选择标签 */
        #p1{
            color: blueviolet;
        }

id在一个页面中不能重复，所有id选择器只被一个元素应用

4.类选择器

.content{
            width: 100px;
            height: 100px;
            background-color: red;
        }

类选择器的其他用法：1.多类选择器： <元素class=“类名1 类名2 类名3...”> 2.分类选择器，更精准匹配到目标元素: .类名1.类名2（样式声明）匹配到的是同时引用类1,2的元素 3.元素选择器：选择到特定元素。

类名的定义规范 .类名（样式声明）

必须有.

不能以数字开头

只能包含字母，数字 - 或者_

不能使用关键字

尽量见名知意

5.群组选择器

选择器1，选择器2，选择器3......{样式声明}

#d1，c1，div，p，c2{color:red;background-color:yellow}

相当于：

选择器1{样式声明}

选择器2{样式声明}

选择器3{样式声明}

6.后代选择器

（空格）用过元素的后代关系，来匹配元素

后代关系：一级或多级的嵌套

选择器1 选择器2 选择器3{样式声明}

7.子代选择器

>通过元素子代关系来匹配元素

子代关系，一层嵌套为子代

选择器1>选择器2>选择器3{样式声明}

子代和后代选择器可以混合使用

#d1>p span{color:red}

8.伪类选择器

匹配元素在某一个状态时的样式

（1）只适用于a标签的伪类有2种：

①匹配超连接未被访问时的整体 :link

a:link{color:red}

②匹配超链接已被访问时的状态 :visited

a:visited{color:green}

（2）所有元素都能用的伪类

:hover 鼠标悬停的状态

:active 激活状态:鼠标按住不放的瞬间才是Active状态

:focus 元素获取焦点时的状态（input button）a:focus{font-size:36px;color:orange}

练习：04_ex.html

一个a标签，设置以下样式

1.访问后，文本颜色orange

2.被激活时，文本颜色green

3.鼠标悬停时，文本颜色red

4.未被访问时，文本pink

当:link :visited:hover:active同时作用在一个a标签上时

需要按照顺序去编写，不然会有状态显示不出样式的情况

lv & ha 爱恨原则

:link:visited:hover :active

9.选择器权值

选择器权值，代表选择器的重要程度

重要程度高，优先显示

!import >1000

内联样式 1000

id选择器 100

类选择器 10

伪类选择器 10

元素选择器 1

通用选择器 0 可以参与计算

继承的样式无不能

权值的特点

1.当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加

值最大的显示

2.有多个选择器的权值一样大，按照就近原则

3.添加了!important当前css样式直接获取最高优先级

4.群组选择器，权值不相加，个算个的

5.选择器权值的计算，不会超过本身选择器权值的最大数量级，权重相加时不会进位，（例如n个类选择器权重相加，结果不会超过100）

五.基础属性

1.宽高

css通过width、height这两个属性来设置HTML标签的尺寸和大小，即元素的宽高

2.背景样式

背景样式的属性
属性	含义
background-color	设置背景色
background-image	设置背景图片
background-reprat	设置背景图片的平铺方式
background-position	设置背景图片的位置
background-attachment	设置背景图随滚动条的移动方式

$\bullet$ 背景色 background-color

<style>
        body{
            background-color: #333333;
        }
        .photo-one{
            background-color: #fff;
            width: 250px;
            height: 50px;
        }
        .photo-two{
            background-color: aqua;
            width: 50px;
            height: 250px;
        }
    </style>

$\bullet$ 背景图片 background-image

<style>
        .demo-bgi{
            width: 600px;
            height: 300px;
            background-image: url(./img/泳池派对\ 凯特琳.jpg);
            background-size: cover;
        }
    </style>

$\bullet$ 设置背景图片的平铺方式 background-repeat

属性选取：

参数	说明
repeat	水平垂直方向上都是重复平铺的，默认值
repeat-x	只在水平方向重复平铺，垂直方向上不重复平铺
repeat-y	只在垂直方向重复平铺，水平方向上不重复平铺
no-repeat	水平和垂直方向都不进行平铺

$\bullet$ 设置背景图片的位置 background-position

<style>
        .demo-bgi{
            width: 600px;
            height: 300px;
            background-image: url(./img/泳池派对\ 凯特琳.jpg);
            background-position: 50px 100px;
            background-repeat: no-repeat;
        }
    </style>

六.边框样式

边框属性	说明
border-color	边框颜色（四边）
border-size	边框大小（四边）
border-style	边框样式（四边）solid(实线) dashed(虚线) dotted(点线)
border-left-*	左边框
border-right-*	右边框
border-top-*	上边框
border-bottom-*	下边框

七.文本样式

文字相关属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细（normal:正常 lighter:较细 bold: 较粗 bolder:很粗）
font-style	字体样式
color	字体颜色

例子：

font-family:字体1，字体2，字体3 /*可指定多种字体，多个字体按照优先顺序排列，以逗号隔开*/