前端基础应用：css文件编写

喆子玩点数据

已于 2022-09-15 09:18:28 修改

阅读量1.9k

点赞数 4

分类专栏： html基础文章标签： css 前端 html

于 2022-09-15 00:23:04 首次发布

本文链接：https://blog.csdn.net/m0_58239511/article/details/126860986

版权

在这里插入图片描述
css文件在前端网页页面制作过程中作用主要是控制html文件中标签的样式
css又叫层叠样式表(简称：样式表)，主要用来设置网页内容的样式和布局

一、css组成部分

a.选择器{}

选中需要设置样式的标签（注意：内联样式表不需要写这个结构）

b.样式属性

属性名和属性值之间用冒号连接，一个属性添加完成后必须在后面加分号
常用的属性：color(文字颜色)、background-color(背景颜色)、font-size(设置字体大小)、width(设置宽度)、height(设置高度）、font-weight(设置字体的粗细)

1.内部样式：
css代码可以写在html文件中，与head，body同级.标签为

<style>
#p{
     background-color: yellow;}
</style>

2.外部样式：
css在css文件夹中时，在html文件中写入

<link rel="stylesheet" href="css/demo1.css">

3.内联样式表:
css可以直接写在代码内部

<p style="color: red;">我是段落1</p>

二、css选择器

css中选择器是用来选中需要设置样式的标签

常见css选择器

1)元素选择器(标签选择器):

直接将标签名作为一个选择器，选中的是所有指定标签
p{} - 选中当前页面中所有的p标签
a{} - 选中所有的a标签

2)id选择器:

在标签的id属性值前加#作为一个选择器，选中的是id属性值为指定值的标签(id属性是唯一的，不需要使用纯数字)
#p{} - 选中id属性值为"p"的标签
#box{} - 选中id属性值为"box"的标签

3)class选择器:

在标签的class属性值前加.作为一个选择器，选中class属性值为指定值的所有标签
(相同的class属性值在整个网页中可以有多个；同一个标签还可以有不同的class值)
.p{} - 选中class属性值为"p"的所有标签
.c1{} - 选中class属性值为"c1"的所有标签
.c1.c2 - 选中class值同时为c1和c2的所有标签
p.c1 - 选中class属性值为c1的p标签

4)通配符：

直接将*作为选择器，选中当前页面所有的标签

5)群组选择器:

-	将多个独立的选择器用逗号隔开作为一个选择器

p,a{} - 选中所有的p标签和所有的a标签
p,.c1{} - 选中所有的p标签和所有class值为c1的标签
a,.c2,#p1 - 选中所有a标签和所有class值为c2的标签以及id为p1的标签

6）后代选择器:

多个选择器用空格隔开作为一个选择器

7）子代选择器

多个选择器用">"隔开作为一个选择器

三、伪类选择器

用来选中标签状态，对特点状态设置样式

1)语法：
普通选择器:伪类选择器{}

2)常用的伪类选择器(不同的伪类选择器对应不同的状态)
:link - 链接没有成功访问过的时候对应的状态(a标签特有的状态)
:visited - 链接已经访问多的时候对应的状态(a标签特有的状态)
:hover - 鼠标悬停在标签上对应的状态(所有可见标签都有的状态)
:active - 鼠标在标签上点击按住不放对应的状态(所有可见标签都有的状态)

注意：如果一个标签同时设置多个状态的样式，需要遵守”爱恨原则 - LoVe HAte
按这个等级进行

<body>
	<a href="https://www.baidu.com">第一章</a>
	<a href="https://www.jd.com">第二章</a>
	<a href="https://www.51job.com"&g

最低0.47元/天解锁文章