CSS入门教程

最新推荐文章于 2024-04-10 15:33:11 发布

程序员buddha

最新推荐文章于 2024-04-10 15:33:11 发布

阅读量2.9k

点赞数 8

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

本文链接：https://blog.csdn.net/rulaixiong/article/details/129949203

版权

文章目录

一、前端

在这里插入图片描述

构成	语言	描述
结构	HTML	网页元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如颜色、大小等）
行为	JavaScript	网页交互

二、CSS

2.1 css概念

CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式

2.2 CSS样式引入方式

2.2.1 外部样式

CSS写在一个单独的.css文件中，通过link标签在网页中引入

<link rel="stylesheet" href="文件路径">

2.2.2 内部样式

CSS写在网页的head标签中，用style标签包裹

<style>
    /* 写在style标签中的样式 */
</style>

2.2.3 行内样式

CSS写在标签的style属性中

<标签名 style="行内样式写在这"></标签名>

三种CSS样式引入方式的区别

引入方式	书写位置	作用范围	使用场景
外部样式	CSS写在单独的css文件中，通过link标签引入	多个页面	项目中
内部样式	CSS写在head头部style标签中	当前页面	案例演示中
行内样式	CSS写在标签的style属性中	当前标签	配合js使用

2.3 基础选择器

选择器，就是选取（查找）需要设置样式元素的方式

选择器 {
	属性名: 属性值;
}

属性名和属性值合称为css属性

2.3.1 元素选择器

通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
     
            color: red;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <p>我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>

在这里插入图片描述

小结：

1、无论嵌套多少层，只要元素名称相同都会被找到

2.3.2 类选择器

通过类名称，找到页面中所有带这个类名称的元素，然后对其设置CSS样式

类选择器，也有人叫class选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .color-style {
     
            color: red;
        }
    </style>
</head>
<body>
    <p class="color-style">我爱中国</p>
    <p>我爱人民</p>
    <div class="color-style">我爱家乡</div>
</body>
</html>

在这里插入图片描述

小结：

1、所有元素都有class属性，class属性的属性值叫类名

2、类名由数字、字母、下划线、中划线组成，不能以数字、中划线开头

3、一个元素可以有多个类名，类名之间用空格隔开

2.3.3 id选择器

通过元素id属性的属性值，找到页面中带这个id属性值的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one {
     
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我爱中国</p>
    <p id="two">我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>

在这里插入图片描述

小结：

1、所有元素都有id属性

2、id属性值在一个页面中是唯一的

3、一个元素只能有一个id属性值

2.3.4 通配符选择器

查找页面中所有的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        * {
     
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我爱中国</p>
    <p id="two">我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>

在这里插入图片描述

小结：

1、通常用于网页重置样式，不常用

2.3.5 后代选择器

根据选择器查找符合条件的元素，再根据后代选择器查找符合条件的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one p {
     
            color: red;
        }
    </style>
</head>
<body>
    <div id="one">
        <p>我爱中国</p>
        <p>我爱人民</p>
        <div>我爱家乡</div>
        <div>
            <p>我爱中国</p>
            <p>我爱人民</p>
        </div>
    </div>
    <div id="two">
        <p>我爱中国</p>
        <p>我爱人民</p>
        <div>我爱家乡</div>
        <div>
            <p>我爱中国</p>
            <p>我爱人民</p>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

2.3.6 群组选择器

根据多个选择器各自查找符合条件的元素，然后对其设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p,h3 {
     
            color: red;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <h3>我爱人民</h3>
    <div>我爱家乡</div>
</body>
</html>

在这里插入图片描述

2.4 字体样式

字体样式，针对文字本身样式

字体相关的CSS属性

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体风格
color	字体颜色

2.4.1 字体类型

语法：

font-family: 字体1,字体2,字体3...;

说明：

1、font-family属性可是设置多个属性值，用英文逗号隔开，生效顺序是从左到右。浏览器默认字体类型一般是"宋体"

2、字体类型只有一个英文单词，则不需要加上引号；字体类型是多个英文单词或中文的，则需要加上双引号

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
     
            font-family: Arial;
        }
        h3 {
     
            font-family: monospace;
        }
        div {
     
            font-family: "新宋体";
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <h3>我爱人民</h3>
    <div>我爱家乡</div>
</body>
</html>

在这里插入图片描述

2.4.2 字体大小

语法：

font-size: 数字 + px

说明：

1、px是像素单位，单位需要设置，否则无效

2、谷歌浏览器默认文字大小是16px

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
     
            font-size: 18px;
        }
        div {
     
            font-size: 36px;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <div>我爱家乡</div>
</body>
</html>

在这里插入图片描述

2.4.3 字体粗细

语法：

font-weight: normal/bold/100~900

说明：

属性值	说明
normal	正常（默认值）
bold	较粗
100~900	取100~900九种数值，但部分字体没有9种粗细，设置可能不生效

实际开发一般会设置bold，不设置默认是normal

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
     
            font-weight: normal;
        }
        div {
     
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <div>我爱家乡</div>
</body>
</html>

在这里插入图片描述

2.4.4 字体风格

语法：

font-style: 取值

说明：

属性值	说明
normal	正常（默认值）
italic	斜体
oblique	斜体

不是所有字体都有italic属性值，如果没有italic的，则用oblique

font连写

语法：

font: style weight size family;

说明：

1、可以省略前两项，省略了相当于设置了默认值

不常用，作为了解

2.4.5 字体颜色

语法：

color: 颜色值

说明：

color属性取值常用有两种，一种是关键字（比如red、green、blue），另外一种是16进制RGB值（#000000，#FFFFFF）

问题一：给同一个元素设置了相同的属性样式，哪个生效？

答：样式会层叠（覆盖），写在最后面的会生效。

问题二：html里面有注释，css有没有注释，如何写？

<style>
    /* 采用元素选择器给p元素设置css样式 */
    p {
   
        color: #000000;  /* p元素字体颜色为黑色 */
    }
</style>

2.5 文本样式

文本样式，针对段落的排版效果

文本相关CSS属性

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修缮
text-transform	大小写转换
line-height	行高
letter-spacing	字母间距
word-spacing	词间距

2.5.1 首行缩进

语法：

text-indent: 像素值

说明：

缩进大小和字体大小是有关的，缩进1个字的空间等同于1个字的字体大小。

<!DOCTYPE html>
<html>
<head>

最低0.47元/天解锁文章

程序员buddha

关注

8
点赞
踩
69

收藏

觉得还不错? 一键收藏
打赏
2
评论
CSS入门教程

CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式CSS写在一个单独的文件中，通过link标签在网页中引入2.2.2 内部样式CSS写在网页的head标签中，用style标签包裹2.2.3 行内样式CSS写在标签的style属性中三种CSS样式引入方式的区别选择器，就是选取（查找）需要设置样式元素的方式2.3.1 元素选择器通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式小结：1、无论嵌套多少层，只要元素名称相同都会被找到通过类
复制链接

扫一扫