当前位置：首页 > news >正文

CSS初识

news 来源：原创 2025/4/24 8:30:30

CSS能够对⽹⻚中元素位置的排版进⾏像素级精确控制,实现美化⻚⾯的效果.能够做到⻚⾯的样式和结构分离。

可以理解给页面化妆，美化排版。

基本语法规范

选择器+{⼀条/N条声明}

选择器决定针对谁修改(找谁)

声明决定修改啥(⼲啥)

声明的属性是键值对，使⽤;区分键值对,使⽤：区分键和值。

如下面这条样式就是设置全部div的颜色和字体大小。

<style>div {/* 
设置字体颜⾊*/ 
color: red;/* 
设置字体⼤⼩*/ 
font-size: 30px;}</style>

CSS有3种引⼊⽅式，行内部式、内部样式、外部样式

<div style="color:green">绿⾊行内部式

<style> h1 {...}</style>内部样式

<link rel="stylesheet" href="style.css">外部样式

下面是两种style的使用方法，内部样式与行内样式（相当于全局变量与局部变量），当有冲突时候线生效最近的方法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>内部样式div{color: #006aff81;font-size: 30px;}
</style>
</head>
<body><div style="color: green;">一个div</div> 行内样式<div>一个div</div> <div>一个div</div> <span>一个span</span><span>一个span</span> <span>一个span</span>
</body>
</html>

如果我们嫌弃不好看，还style方法移动到css文件里（外部样式）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">外部样式调用<!-- <style></style> -->
</head>
<body><div style="color: green;">一个div</div> <div>一个div</div> <div>一个div</div> <span>一个span</span><span>一个span</span> <span>一个span</span>
</body>
</html>

结果都是一样的：

CSS选择器

1.标签选择器

标签选择器，可以通过标签来更改对应标签中的内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{color: brown;}a{color:blueviolet;}span{color: aqua;} </style>  
</head>
<body><div id="div1" class="foun40">div1</div><div id="div2" class="foun40">div2</div><div id="divx"><a href="" id="div3" >div3</a></div><!-- 由于a标签离得更近，优先生效a标签的选择器，不会被外面的选择器改变 --><span id="div4" class="foun40">span</span>
</body>
</html>

id选择器

复合选择器

通过id属性来选择对应的内容更改文字或者图片的属性，id的属性前面加上“#”表示CSS选择器是通过id选择，在这还有复合选择器，将div1和div3的重复操作变为一个。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#div1,#div3{取并集，这是复合选择器，将多个重复操作融合在一起color:brown;}#div4{color:blue;}</style></head>
<body><div id="div1" class="foun40">div1</div><div id="div2" class="foun40">div2</div><div id="divx"><a href="" id="div3" >div3</a></div><!-- 由于a标签离得更近，优先生效a标签的选择器，不会被外面的选择器改变 --><span id="div4" class="foun40">span</span>
</body>
</html>

class选择器

通过class属性来选择对应的内容更改文字或者图片的属性，id的属性前面加上“.”表示CSS选择器是通过class选择：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.fount40{font-size: 40px;}</style></head>
<body><div id="div1" class="foun40">div1</div><div id="div2" class="foun40">div2</div><div id="divx"><a href="" id="div3" >div3</a></div><!-- 由于a标签离得更近，优先生效a标签的选择器，不会被外面的选择器改变 --><span id="div4" class="foun40">span</span>
</body>
</html>

通配符选择器

通配符选择器是修改全部标签的属性，括号前面加上“*”表示是通配符选择器：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{color: blueviolet;}</style></head>
<body><div id="div1" class="foun40">div1</div><div id="div2" class="foun40">div2</div><div id="divx"><a href="" id="div3" >div3</a></div><!-- 由于a标签离得更近，优先生效a标签的选择器，不会被外面的选择器改变 --><span id="div4" class="foun40">span</span>
</body>
</html>

复合选择器

复合选择器是多个单选择器混合一起使用，用空格分隔，从左往右依次根据标签选择：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul li{color: tomato;}ol li{color: blue;}ul .first{color:blueviolet;}ol a{color:aqua;}</style></head>
<body><ul><div>无序列表</div><li class="first">第一列表标签</li><li> <a href="#">第二列表标签</a></li><li>第三列表标签</li><li>第四列表标签</li></ul><ol><div>有序列表</div><li><a href="#">第1列表标签</a></li><li class="first">第2列表标签</li><li>第3列表标签</li><li>第4列表标签</li></ol>
</body>
</html>

得到的结果如下(a标签默认就是蓝色)：

常用的CSS样式

color

color是设置字体颜色：

 <style>div{color: red;}
</style>

颜⾊有如下⼏种表达⽅式:

1.英⽂单词,如red,blue

2.rgb代码的颜⾊如rgb(255,0,0)

3.⼗六进制的颜⾊如#ff00ff

font-size

设置字体的大小：

 <style>div{color: red;}
</style>

border

设置边框。

边框是一个复合属性，可以同时设置多个样式，不分先后顺序，浏览器会根据设置自动更新

border-width：设置边框粗细

border-style：设置边框的样式（dotted:点状、solid:实线、double:双线、dashed:虚线）

border-color：设置边框的颜色（设置方法与color相同）

也可以用border直接设置这三种属性。

width/height

设置高度和宽度。

只有块级元素可以设置宽高，块级元素是HTML标签的⼀种显示模式,对应的还有行内元素常见块级元素:h1-h6、p、div等常见行内元素:a、span等块级元素独占一行,可以设置宽高，行内元素不独占一行,不能设置宽高。

如果需要修改行内元素的高宽，则需要使用display:block来修改成一个块级元素。

同样的，外面可以通过display:inline来修改块级元素为行内元素。

<style>div{/* 颜色 */color:brown;/*英文单词 或者rgb自己配颜色*//* 字体大小*/font-size: 32px; /*自行上网找找样式更改语法，这里不多写 *//* 边框 *//* 复合属性，可以同时设置多个样式,不分前后顺序,浏览器会根据设置的值⾃动判断 *//* border: 10px solid purple;border  对应设置分别为边框粗细,边框样式,边框颜⾊，是全设置，不能细分那一边的设置 *//* border-width: 1px 5px 10px 5px; 设置上下左右的吧边框像素 *//* 也可以这样 *//* border-width:5px; */border-style: dashed; /*设置边框样式，这里是虚线*/border-color: black;/* 上下左右的边框粗细，也可以统一粗细 */border-bottom-width: 10px;border-top-width: 1px;border-left-width: 5px;border-right-width: 5px;/* width: 设置边框宽度，height: 设置边框⾼度 */width: 500px; height: 200px;}

上述代码中border-with、border-style、border-color属性：

当指定一个值时对四边生效；两个值时候第一个值对顶部和底部生效，第二个值对左右侧生效；三个值时候第一个值对顶部生效，第二个值对左右侧生效，第三个值对底部生效；四个值时按照顶部、右侧、底部、左侧（顺时针）生效。

也可以用border直接设置这三种属性，但是无法细分到那一条边框，是全部一起设置。

padding内边框与margin外边框

padding: 设置内容和边框之间的距离，内容默认是顶着边框来放置的，用padding来控制这个距离。

padding也是⼀个复合样式,可以对四个方向分开设置padding-top、padding-bottom、padding-left、padding-right。

margin：设置设置边框和边框之间的距离，用于隔开两个元素。

margin也是⼀个复合样式,可以给四个⽅向都加上外边距margin-top、margin-bottom、margin-left、margin-right。

我们将div1与div2之间设置一下外边距为10px，div1与div5设置内边距为10px：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 100px;border: 1px solid black;}#div5{width: 100px;height: 50px;border: 1px solid red;/*也可以通过div5的外边距调整与div1的空隙 */margin-top:10px;margin-left:10px; }#div1{margin-bottom : 10px;/* 可以通过div1的内边距来调整与div1的空隙 *//* padding-top: 10px;padding-left: 10px; */}</style>
</head>
<body> <div id="div1"><div id="div5">第一个div</div> </div><div id="div2">第二个div</div><div id="div3">第三个div</div><div id="div4">第四个div</div>
</body>
</html>

运行结果如下