CSS知识总结1

最新推荐文章于 2024-11-10 11:49:10 发布

陈胜吴广的温

最新推荐文章于 2024-11-10 11:49:10 发布

阅读量50

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_69437610/article/details/133572698

版权

概述

CSS是Cascading Style Sheets（级联样式表）。
CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。
CSS与HTML
HTML是网页样式
CSS定义页面的样式

基本用法

1.css语法

p {
    color: red;
    text-align: center;
}

2.创建并引用

引用外部css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--引入外部样式表-->
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <p>外部样式</p>
</body>
</html>

p {
    color: red;
    text-align: center;
}

内部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--引入内部样式表-->
    <style>
        p {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>外部样式</p>
</body>
</html>

CSS选择器

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，一般来说，一个页面中标签的id的名称，必须唯一且不能重复。

<p id="part1">段落1</p>
<p id="part2">段落2</p>

#part1 {
    color: red;
}

class类选择器

class 选择器可以为标有特定 class 的 HTML 元素指定特定的样式，一般来说，一个页面中标签的class的名称，可以不唯一且可以重复。

<p class="blod">段落1</p>
<p class="bold">段落2</p>
<p class="greenbold">段落3</p>


.blod{
    color: yellow;
}
 
.greenblod{
    color: red;
}

伪类

CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类

伪类的语法：

:hover伪类表示鼠标移入的状态
:active表示的是被点击的状态
:focus向拥有键盘输入焦点的标签添加样式。

样式

文本

color：字体颜色
font-size：字体大小
font-family：字体
text-align：文本对齐
text-decoration:line-through：定义穿过文本下的一条线
text-decoration:underline：定义文本下的一条线
text-decoration:none：定义标准的文本
font-style: italic;斜体文本
font-weight:字体粗细
line-height:设置行高
letter-spacing可以指定字符间距
text-indent用来设置首行缩进

背景

background-color背景颜色
background-image背景图片
background-repeat背景重复
background-size背景尺寸
background- position 背景位置

字体

CSS 字体属性用于定义HTML内容字体的样式
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本
font-weight 指定字体的粗细

列表

CSS 列表属性用于定义HTML常见列表的样式
list-style 简写属性，用于把所有用于列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志
list-style-position 设置列表中列表项标志的位。
list-style-type 设置列表项标志的类型

表格

CSS 表格属性用于定义HTML表格的样式
border-collapse 设置是否把表格边框合并为单一的边框
border-spacing 设置分隔单元格边框的距离
caption-side 设置表格标题的位置
empty-cells 设置是否显示表格中的空单元格
table-layout 设置显示单元、行和列的算法