CSS基础知识点速览

最新推荐文章于 2024-11-12 22:56:44 发布

woshicaiji12138

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量244

点赞数 3

分类专栏：常识前端文章标签： css 前端

本文链接：https://blog.csdn.net/woshicaiji12138/article/details/134211424

版权

常识同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

1 基础认识

1.1 css的介绍

CSS:层叠样式表(Cascading style sheets)
CSS作用：
给页面中的html标签设置样式
css写在style标签里，style标签一般在head标签里，位于head标签下。

    <style>
        p{
            color: red;
            background-color: green;
            font-size: 30px;
            height: 50px;
            width: 50px;
        }
    </style>

在这里插入图片描述

1.2 CSS的引入

内嵌式：css写在style标签里
外联式：css写在单独的.css文件中

p{
    color: blue;
    font-size: 30px;
    background-color: aquamarine;
}

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

在这里插入图片描述
行内式：css写在style标签属性中

<div style="color: red; font-size:10px">hello</div>

2基础选择器

2.1 标签选择器

标签选择器：以标签名命名的选择器

<head>
    <style>
        p{
            color: red;
            background-color: green;
            font-size: 30px;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
<script>
    <p>hello</p>
</script>
</body>

2.2 类选择器

通过类名，找到页面中所有带有这个类名的标签，设置样式
类名可以重复，一个类选择器可以选中多个标签

<!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>
        .win{
            color: blue;
        }
    </style>
</head>
<body>
    <p class="win">hello</p>
</body>
</html>

在这里插入图片描述

2.3 id选择器

通过id属性值，找到页面中所有带有这个id的标签，设置样式

 <p id="win">hello</p>

所有标签上都有id属性
id在一个页面中是唯一的
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

2.4 通配符选择器

    <style>
        *{
            color: blue;
        }
    </style>

用的非常少

3文字

3.1文字大小

属性名:font-size
取值:数字+px

3.2字体粗细

font-weight
取值:
1关键字
normal 正常
bold 加粗
2纯数字
400正常
700加粗

3.3字体样式

3.3.1是否倾斜

font-style
取值
normal 正常
italic 倾斜

3.3.2字体系列

font-family
取值:
宋体

3.3.3 字体font相关属性的连写

属性名：font
取值：

P{
font: italic 700 66px 宋体
}

3.4 扩展

如果给了一个标签的相同属性设置了多个样式，此时样式会覆盖，浏览器会选择最后一个设置来渲染。

3.5 文本样式

3.5.1 文本缩进

属性名:text-indent
取值：
数字+px
数字+em（1em=当前标签font-size的大小）
首行缩进2个字

    <style>
        p{
            text-indent: 2em;
        }
    </style>

3.5.2 文本水平对齐方式

text-align
取值：
left左对齐
right右对齐
center居中对齐

3.5.3 文本修饰

text-decoration
取值
underline下划线
line-through删除线
overline 上划线
none 无装饰线
开发中会用text-decoration: none;清楚a标签默认的修饰

3.5.4 行高

控制两行文字之间的距离
属性名：line-height
取值:
1数字+px
2倍数（当前font-size的倍数）
应用：
1网页精准布局时会设置line-height:1取消上下间距；
2让单行文本垂直居中可以设置line-height:文字父元素高度

font: style weight size/line-height 字体

字体大小和行高之间用/隔开。

3.5.5 颜色

文字颜色:color
背景颜色: background-color
取值如下图[1]
在这里插入图片描述
#000000
上面数字两辆一组
三组分别代表红、绿、蓝的数值

4 Chrome调试工具

鼠标右键-检查
在这里插入图片描述
只要肯定代码上有删除线就是被重叠覆盖掉了。

5 扩展

标签水平居中
margin: 0 auto

参考

[1]扩展颜色取值