html-css

最新推荐文章于 2024-05-28 13:09:25 发布

我韩金铭实名上网

最新推荐文章于 2024-05-28 13:09:25 发布

阅读量67

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_69120641/article/details/130629897

版权

CSS入门学习
一、CSS简介
1、什么是CSS
CSS：Cascading Style Sheet 层叠样式表,是一组样式设置的规则，用于控制页面的外观样式

2、CSS作用
页面外观美化,布局和定位

二、基本用法

1、CSS语法

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

2、创建并引用

外部

<!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="green">段落1</p>
<p class="bold">段落2</p>
<p class="green bold">段落3</p>

p {
    color: yellow;
}

a {
    color: red;
}

伪类

anchor伪类

a:link {color:#FF0000;} /* 未访问的链接样式 */
a:visited {color:#00FF00;} /* 已访问的链接样式 */
a:hover {color:#FF00FF;} /* 鼠标划过链接样式 */
a:active {color:#0000FF;} /* 已选中的链接样式 */

3.1、背景样式
CSS 背景属性用于定义HTML元素背景的样式。

属性   描述
background   简写属性，作用是将背景属性设置在一个声明中。
background-attachment   背景图像是否固定或者随着页面的其余部分滚动。
background-color   设置元素的背景颜色。
background-image   把图像设置为背景。
background-position   设置背景图像的起始位置。
background-repeat   设置背景图像是否及如何重复。
3.2、文本样式
CSS 文本属性用于定义HTML文本内容的样式。

属性   描述
color   设置文本颜色。
direction   设置文本方向。
letter-spacing   设置字符间距。
line-height   设置行高。
text-align   对齐元素中的文本。
text-decoration   向文本添加修饰。
text-indent   缩进元素中文本的首行。
text-shadow   设置文本阴影。
text-transform   控制元素中的字母。
unicode-bidi   设置或返回文本是否被重写。
vertical-align   设置元素的垂直对齐。
white-space   设置元素中空白的处理方式。
word-spacing   设置字间距。
3.3、字体样式
CSS 字体属性用于定义HTML内容字体的样式。

属性   描述
font   在一个声明中设置所有的字体属性。
font-family   指定文本的字体系列。
font-size   指定文本的字体大小。
font-style   指定文本的字体样式。
font-variant   以小型大写字体或者正常字体显示文本。
font-weight   指定字体的粗细。
3.4、链接样式
<a href="https://www.baidu.com/">打开百度，你就知道！</a>
1
a:link {color:#FF0000;} /* 未访问的链接样式 */
a:visited {color:#00FF00;} /* 已访问的链接样式 */
a:hover {color:#FF00FF;} /* 鼠标划过链接样式 */
a:active {color:#0000FF;} /* 已选中的链接样式 */
1
2
3
4
注意：推荐使用顺序为link、visited、hover、active

3.5、列表样式
CSS 列表属性用于定义HTML常见列表的样式。

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

属性   描述
border-collapse   设置是否把表格边框合并为单一的边框。
border-spacing   设置分隔单元格边框的距离。
caption-side   设置表格标题的位置。
empty-cells   设置是否显示表格中的空单元格。
table-layout   设置显示单元、行和列的算法。
3.7、轮廓样式
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

属性   描述
outline   在一个声明中设置所有的轮廓属性。
outline-color   设置轮廓的颜色。
outline-style   设置轮廓的样式。
outline-width   设置轮廓的宽度。

我韩金铭实名上网

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-css

CSS入门学习一、CSS简介1、什么是CSSCSS：Cascading Style Sheet 层叠样式表,是一组样式设置的规则，用于控制页面的外观样式2、CSS作用页面外观美化,布局和定位二、基本用法1、CSS语法2、创建并引用外部内部。
复制链接

扫一扫