CSS样式表详解-优快云博客

本文链接：https://blog.youkuaiyun.com/zhao_yu_lei/article/details/73332024

本文介绍了CSS的基本概念，包括层叠样式表的作用、与HTML的整合方式、选择器的使用、属性设置等内容，并提供了多种示例帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一 .css概述
Css：Cascade Style Sheet，层叠样式表
1.为了更好的显示html设置的内容
2.多个样式可以层叠
3.可以将内容表现分离
4.提高工作效率（网页的多个模块，样式统一，可以使用外部样表）
二.css与html的整合方式
1.内部样式表:
在标签中直接通过style属性，对标签所包围的内容进行样式控制；行内样式表只能在控制标签内的样式

<p style="color: blue; font-family: 华文新魏; font-weight: bold;"></p>

2.内联样式表
一般在标签中添加标签，在style标签中设置网页的样式；下面设置的是段落的样式,因为是标签选择器所以所有段落标签里的内容都用这个样式

<head>
……
<style type="text/css">
    p{
        color: blue;
        text-align: center;
    }
</style>

3.外联样式表
先创建 .css 文件，将样式控制语句全部写入到.css文件中，再将.css文件在页面文件的head标签中使用标签链接
href : 表示外部css文件的位置
rel: 表示关联的是样式表

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

注意:
1.三种方式的优先级: 内部>内联>外联
2.三种方式的优缺点:
内部: 只能控制单个标签,一般用在需要特殊控制的单元内
内联:可以控制当前html文件的多个元素,标签的样式,和html混在一起不好维护,并且只能当前页面使用
外联:已将制定好的样式表,可以用于多个页面,但是相对抽象,不建议初学者使用.
3.一般在当前页面写好内联样式,可以抽取出来做外联样式表,用于多个页面

三.css样式与html标签的关联—-选择器
常用:
1.标签选择器,
注意div这样的块状元素也能选中,但是一般用id
控制整个页面的这个标签的样式

    <style type="text/css">
    html标签{
        font-size:24px;
        color:#F00; 
        }
    </style>

2.类选择器:
控制调用该类的标签的样式 , .类名{}
1）选择的标签必须有class的属性。同类的标签使用同名
2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先！！！

    <style type="text/css">
    .c1{
        font-size:24px;
        color:#F00; 
    }
    </style>

<p class="cl"> </p>

3.id选择器
控制标签的id为该id的标签的样式 , #id{}
1）选择的标签必须有id属性。
2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById(“id属性值”)
3）id选择器的优先级最高！

#id{
        font-size:24px;
        color:#0F0;
    }

其他:
4.后代选择器
eg:div a{} : 表示该

标签下的标签,中间要有空格
5.并集选择器
eg .class1,#id{} : 多个选择器的css内容相同，那么可以使用并集选择器来合并css内容,中间用逗号
6.交集选择器,选择选择器的交集部分

h1.center {color:red; text-align:center;}
这种格式由标签选择器和类选择器组成。

h1#center {color:red; text-align:center;}
这种格式由标签选择器和id选择器组成

7.通用选择器
*{} : 选择所有标签,意思所有标签的样式
8.伪类选择器
作用：控制标签在不同状态下的样式。
标签有四种状态：
link: 没有访问过的状态
hover: 鼠标经过的状态
active:鼠标激活（按下但没有松开）的状态
visited: 已经被访问过的状态（鼠标点下且松开）

<style type="text/css">
    /*使用link伪类控制--没有访问过的状态*/
    a:link{
        font-size:24px;
        color:#F00;
    }
    /*使用visited伪类控制--已经被访问过的状态（鼠标点下且松开）*/
    a:visited{
        font-size:24px;
        color:#CCC;
        text-decoration:none;
    }

    /*使用hover伪类控制-鼠标经过的状态*/
    a:hover{
        font-size:24px;
        color:#00F;
        text-decoration:none; 
    }
    /*使用active伪类控制--鼠标激活（按下但没有松开）的状态*/
    a:active{
        font-size:24px;
        color:#0F0;
        text-decoration:underline;
    }
/*注意：
        1）在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
        2）在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。        
        正确顺序： link visited hover active
*/
</style>
</head>

<body>
<a href="01.css入门.html">超链接</a>
</body>
</html>

四.属性

1.文本 :
color 设置文本颜色
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。

none    默认。定义标准的文本。
underline   定义文本下的一条线。
overline    定义文本上的一条线。
line-through    定义穿过文本下的一条线。

text-transform控制元素中的字母

none    默认。定义带有小写字母和大写字母的标准的文本。
capitalize  文本中的每个单词以大写字母开头。
uppercase   定义仅有大写字母。
lowercase   定义无大写字母，仅有小写字母。

word-spacing 设置字间距。单词之间的距离。（）

2.字体
font简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-style 设置字体风格。
font-weight 设置字体的粗细。

3.背景
background 简写属性，作用是将背景属性设置在一个声明中。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

4.列表
list-style简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
4.1 list-style-type:常用值,其他还有请查阅api
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)

5.浮动：
分类：
clear:设置元素的两边是否有其他的浮动元素
值为:both 两边都不允许有浮动元素
display:设置是否及如何显示元素。
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
浮动产生负作用
1)由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2)如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
clear:both清除浮动
并且对应选择器样式为“clear:both”，然后我们在父级“”结束前加一个div引入“class=”clear””样式。这样即可清除浮动。

6.border(边框)
还可以设置颜色风格
简写属性:border:宽度风格颜色;
solid:实线
dashed:虚线
double:双实线
border-radius: 20px; 圆角

用法: border:5px solid red;

7.定位
relative 相对定位
absolute 绝对定位
Fixed 固定定位

8.透明度
opacity: 0.5;谷歌
filter: alpha(opacity=50);ie
-moz-opacity: 0.5;火狐

9.Display
display:block;把内联元素变成块状元素。
display:inline;把块状变成内联元素，如果把一个div，设置成display:inline,那么该div就变成了span
如果用display：block;来修饰那么这个span标签就变成了div.
Display:none;表示该元素被隐藏。

10.其他
cursor: pointer;鼠标小手

鼠标样式

这里写图片描述
溢出的处理
溢出处理