学习CSS第一天

最新推荐文章于 2024-07-25 15:19:10 发布

被头皮屑逼疯的秃头少女

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量58

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/qq_71408630/article/details/129892618

版权

前言

HTML专注于做结构呈现，CSS专注于做样式，即结构（HTML）于样式（CSS）分离。

一、CSS基础选择器

1.1 选择器的作用

根据不同需求把不同的标签选出来，即找到标签（找对人），设置样式（做对事）。

1.2 基础选择器

1.2.1 标签选择器

基本语法：用标签名作为选择器，把某一类标签全部选出来。

例如：

/*使用<div></div>标签作为选择器，进行样式设置 */

div {

/*样式设置 */

color: blue;

}



<div>小猪佩奇的一家</div>

1.2.2 类选择器

基本语法：样式用英文点号进行定义，结构用class属性调用class类。
口诀：样式点（.）定义，结构类（class）调用，一个或多个，开发最常用。

例如：

.first {



}



<div class="first">我是第一个人</div>

1.2.3 多类名选择器

功能：一个标签指定多类名。

例如：

.hotpot {

color: red;

}

.words {

font-size: 30px;

}



<p class="hotpot words">我爱吃大火锅</p>

<p class="hotpot">我爱吃火锅</p>

1.2.4 id选择器

基本语法：样式用井号进行定义，结构用id属性设置id选择器。
口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。

例如：

/* id选择器样式部分 */

#identity {



color:red;

}

/* id选择器结构部分 */

<p>我的名字是黑色的</p>

<p id="identity">我的密码是红色的</p>

id选择器与类选择器的区别

	类选择器	id选择器
类比为	人的名字	人的身份证号码
使用次数	可使用多次	仅使用一次

1.2.5 通配符选择器

基本语法：用星号定义，表示选取页面内所有元素（标签）。

* {



}

1.2.6 基础选择器总结

基础选择器	优点
标签选择器	快速为页面中同类型标签设置统一样式
类选择器	（1）差异化选择不同标签，单独创造一个或几个标签；（2）可使用多次。
多类名选择器	（1）标签元素相同的样式（共同部分）放到一个类里面；（2）标签可调用公共的类，再调用自己独有的类；（3）节省CSS开销，统一修改时更方便。
id选择器	仅使用一次
通配符选择器	（1）通配符选择器不需要调用，自动给所有元素使用样式；（2）特殊情况下使用（例如，清除所有元素的内外边框）。

二.CSS字体属性

2.1 文字样式

基本语法

选择器 {

font-style:文字样式;

}

例如：

/* 给斜体标签（em,i）改为不倾斜字体 */

p {

font-style:normal;

}

2.2 字体大小

基本语法

选择器 {

font-size:字体大小;

}

例如：

/* 指定整个页面的文字大小为20px */

body {

font-size:20px;

}

2.3 字体粗细

基本语法

选择器 {

font-weight:字体粗细;

}

例如：

/* 使已加粗的标签不加粗 */

p {

/* 400:normal*/

font-weight:400;

}

/* 使未加粗的标签加粗 */

p {

/* 700:加粗*/

font-weight:700;

}

2.4 字体系列

基本语法

选择器 {

font-family: 字体类型;

}

例如：

/* 设置字体为隶书 */

div {

font-family: 隶书;

}

2.5 字体样式简写设置

基本语法

选择器{

font:font-style ||

font-weight ||

font-size/line-height ||

font-family;

}

例如：

/* 样式设置 */

#hello {

font: italic 700 70px 隶书;

}



<p>你好</p>

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

2.6 字体属性小结

字体属性	注意点
文字样式font-style	平时很少给文字设置斜体，反而是给斜体标签（em,i）改为不倾斜字体，如p{font-style: normal;}
字体大小font-size	（1）不同浏览器显示字号不一致，尽量给一个明确值，不选择默认大小；（2）通过标签body，可指定整个页面文字大小。
字体粗细font-weight	学会让加粗标签（比如h和strong等）不加粗，或让其他标签加粗
字体系列font-family	（1）各种字体间必须使用英文状态逗号隔开；（2）有空格隔开的多个单词组成字体，加引号；（3）尽量使用系统默认自带字体，让其他用户浏览器也能显示；（4）多个字体时，选择模式为依次匹配，成功即使用。
字体样式简写设置font	（1）使用font属性时，必须按上面中的顺序书写，不能更换顺序，并且各个属性之间以空格隔开；（2）不需要的属性可以省略（使用默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

三.CSS文本属性

3.1 文本颜色

基本语法

选择器 {

color：颜色选择；

}

代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本颜色</title>
    <style>
        /* 样式设置 */
        #first {
            color: red;
        }

        #second {
            color: #a0a0a0;
        }

        #third {
            color: rgb(0, 0, 100);
        }
    </style>
</head>

<body>
    <!-- 结构设置 -->
    <p id="first">我是红色</p>
    <p id="second">我是灰色</p>
    <p id="third">我是蓝色</p>
</body>

</html>

3.2 对齐文本

功能：设置元素内文本内容的水平对齐方式。
基本语法

选择器 {

text-align：文本内容的水平对齐方式

}

代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对齐文本</title>
    <style>
        /* 样式设置 */
        #first {
            text-align: left;
        }

        #second {
            text-align: right;
        }

        #third {
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 结构设置 -->
    <p id="first">我在左边</p>
    <p id="second">我在右边</p>
    <p id="third">我在中间</p>
</body>

</html>

3.3 装饰文本

功能：添加到文本的修饰，给文本加下划线等
代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>装饰文本</title>
    <style>
        #first {
            text-decoration: underline;
        }

        #second {
            text-decoration: overline;
        }

        #third {
            text-decoration: line-through;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <p id="first">我有下划线</p>
    <p id="second">我有上划线</p>
    <p id="third">我有删除线</p>
    <p>
        <a href="#">我是一个没有下划线的链接</a>
    </p>
</body>

</html>

3.4 文本缩进

功能：指定文本第一行的缩进，即段落首行缩进。
代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本缩进</title>
    <style>
        #first {
            text-indent: 2em;
        }

        #second {
            text-indent: 20px;
        }
    </style>
</head>

<body>
    <p>
        在盛唐诗人中，王维、孟浩然长于五绝，王昌龄等七绝写得很好，兼长五绝与七绝而且同臻极境的，只有李白一人。
    </p>
    <p id="first">
        在盛唐诗人中，王维、孟浩然长于五绝，王昌龄等七绝写得很好，兼长五绝与七绝而且同臻极境的，只有李白一人。
    </p>

    <p>
        李白的乐府、歌行及绝句成就为最高。在盛唐诗人中，王维、孟浩然长于五绝，王昌龄等七绝写得很好，兼长五绝与七绝而且同臻极境的，只有李白一人。在盛唐诗人中，王维、孟浩然长于五绝，王昌龄等七绝写得很好，兼长五绝与七绝而且同臻极境的，只有李白一人。
    </p>
    <p id="second">
        李白的乐府、歌行及绝句成就为最高。在盛唐诗人中，王维、孟浩然长于五绝，王昌龄等七绝写得很好，兼长五绝与七绝而且同臻极境的，只有李白一人。在盛唐诗人中，王维、孟浩然长于五绝，王昌龄等七绝写得很好，兼长五绝与七绝而且同臻极境的，只有李白一人。
    </p>


</body>

</html>

3.5 行间距

功能：设置行间距（行高），即上间距+文字高度+下间距。
代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行间距</title>
    <style>
        #first {
            line-height: 66px;
        }
    </style>
</head>

<body>
    <p>普通文本</p>
    <p id="first">设置过行高的文本</p>
    <p>普通文本</p>
    <p>普通文本</p>


</body>

</html>

3.6 文本属性小总结

文本属性	特点
color文本颜色	通常用十六进制#FF0000
text-align文本对齐	文字水平对齐
text-indent文本缩进	段落首行缩进两个字的距离，text-indent:2em;
text-decoration文本修饰	添加下划线underline,取消下划线none
line-height文本行高	控制行与行的距离

四.CSS引入方式

4.1 行内样式表（行内式引入）

实现方式：在元素标签内部的<style>标签属性中设定CSS样式，适用于修改单独的样式。
代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部样式表</title>
</head>

<body>
    <div style="color: blue;font-size:20px;">今天是星期一</div>
    <div>今天是星期二</div>
</body>

</html>

4.2 内部样式表（内嵌样式表，嵌入式引入）

实现方式：CSS写到HTML页面内部，单独放到<style>标签中；
代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内样式表</title>
    <style>
        div {
            color: black;
        }

        #mom {
            color: red;
        }

        .dad {
            color: blue;
        }

        .child {
            color: pink;
        }
    </style>
</head>

<body>
    <div>小猪佩奇的一家</div>
    <p id="mom">猪妈妈</p>
    <p class="dad">猪爸爸</p>
    <p class="child">小猪佩奇</p>
    <p class="child">乔治</p>
</body>

</html>

4.3 外部样式表（外链式/链接式引入）

实现方式：样式单独写到CSS文件，再将CSS文件引入到HTML页面进行使用。
代码展示

<!-- html部分 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表</title>
    <link rel="stylesheet" href="外部.css">
</head>

<body>
    <h1>我爱吃的食物</h1>
    <div>香辣</div>
    <p>火锅</p>
    <p>汉堡</p>
    <div>甜点</div>
    <p>冰淇淋</p>
    <p>小汤圆</p>
</body>

</html>

/* CSS部分 */
h1 {
    color: black;
}

div {
    color: blue;
}

p {
    color: red;
}

4.4 CSS引入方式总结

引入方式	行内样式表	内部样式表	外部样式表
优点	书写方便，权重高	部分样式与结构分离	样式和结构完全分离
缺点	结构与样式未分离	样式与结构没有彻底分离	需要引入
使用情况	使用情况少	使用情况多	使用情况最多
控制范围	控制一个标签	控制一个页面	控制多个页面

五.Chrome调试工具

5.1 打开调试工具

控制一个页面打开Chrome浏览器，按F12键或点击空白处→检查

5.2 使用调试工具

（1）ctrl+键盘滚轮，可以放大开发者工具代码大小；

（2）左边是HTML元素结构，右边是CSS样式；

（3）右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色；

（4）ctrl+0，恢复浏览器大小；

（5）如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误；

（6）如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。

总结

CSS最大的价值：HTML专注做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）分离

被头皮屑逼疯的秃头少女

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习CSS第一天

HTML专注于做结构呈现，CSS专注于做样式，即结构（HTML）于样式（CSS）分离。一、CSS基础选择器基础选择器优点标签选择器快速为页面中同类型标签设置统一样式类选择器（1）差异化选择不同标签，单独创造一个或几个标签；（2）可使用多次。多类名选择器（1）标签元素相同的样式（共同部分）放到一个类里面；（2）标签可调用公共的类，再调用自己独有的类；（3）节省CSS开销，统一修改时更方便。id选择器仅使用一次通配符选择器（1）通配符选择器不需要调用，自动给所有元素使用样式；
复制链接

扫一扫