css样式，超详细整理

莫小烦

已于 2022-06-02 11:59:07 修改

阅读量415

点赞数 6

文章标签： css css3 html

于 2022-06-02 11:58:16 首次发布

本文链接：https://blog.csdn.net/dalingzi_/article/details/125097896

版权

本文详细介绍了CSS的三种写法：内联样式、内部样式表和外部样式表，并探讨了选择器的使用，包括类选择器、ID选择器、元素选择器、伪类选择器等。此外，还讲解了如何通过CSS设置字体与文本样式，如字体家族、字体大小、对齐方式等。这些内容旨在帮助读者深入理解CSS在网页设计中的应用。

摘要由CSDN通过智能技术生成

a.直接写在标签内

<body>
    <div style="width: 200px;height: 200px;background-color: red"></div>
</body>

b.写在style标签内

 <style>
        div{width: 200px;
            height: 200px;
            background-color: red
        }
    </style>

c.使用外部.css文件

在这里插入图片描述

a.class选择器

特点：同一个标签可以由多个类；可以给多个具有相同类的标签设置相同的样式

使用：.类名{样式}

b.id选择器

特点：一个标签只能有一个id

使用：#id名{样式}

c.元素选择器

特点：给多个标签同时设置样式

使用：标签名称1,标签名称2{样式}

注：权重：id选择器>class选择器>元素选择器

d.统配符选择器

特点：设置盒子距网页的边距（通常消除边距）

使用：

<style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>

e.复杂选择器

1.层次选择器

子代(>)、后代( )、相邻(+)和兄弟(~)等四种选择器

2.群组选择器(并集选择器)

在这里插入图片描述

d.伪类选择器

一.

作用：设置访问前后以及鼠标悬停的样式

注：如果一个标签要使用四种选择器的话，要按照以上顺序设置

二.

focus伪类选择器

作用：鼠标悬停时可以改变样式

使用：标签名：focus{样式}

作用：更改字体和文本的样式

使用：标签名{样式}

字体	font-family:
字体样式	font-style:
字体粗细	font-weight：bold(粗体，700)、bolder（900）、lighter
字体大小	font-size：px（单位）2em rem（根标签标准）
符合样式	font：（顺序为：font-style、font-weight、font-size/line-height）
对齐方式	text-align:(可以是right、left、center)
文字缩进	text-indent:(px为缩进单位)
字间距	text-spacing:(px为缩进单位)
文字线条	text-decoration:(underline/overline/line-through(删除线))
行高	line-height:(px为缩进单位)
文字超出隐藏	overflow：hidden、scroll（滚动条）、auto（自动的）
文字溢出	text-overflow:ellipsis(省略号)