CSS1day（基础选择器、字体、文本属性、样式表方式）

荻风溪畔

已于 2022-05-31 20:59:34 修改

阅读量190

点赞数

分类专栏：笔记 web笔记文章标签： css css3 html

于 2022-05-22 22:11:45 首次发布

本文链接：https://blog.csdn.net/qq_44976531/article/details/124917049

版权

笔记同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

web笔记

37 篇文章 0 订阅

订阅专栏

CSS选择器

基础选择器和复合选择器两个大类：

基础选择器由单个选择器组成的
包括：标签、类、id和通配符选择器

基础选择器

标签选择器：
为页面中某一类标签指定统一的CSS样式。
例如将<div>和<p>的所有标签选择出来进行设置样式。
显然这类标签的缺点是不能进行差异化样式。
例如：

p {
font-size: large;
color: deeppink;
}

类选择器

差异化选择不同标签进行设置CSS样式。
需要在标签中定义class属性，对应class属性值设置。
类选择器记忆：样式点定义结构类（class）调用一个或多个开发最常用
例如：

.red {
color : red ;
}

    <style>
        .red {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
            color: rgb(249, 244, 244);
        }
        .green {
            background-color: green;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="red" >asdasd</div>
    <div class="green">sdsdas</div>
    <div class="red">asdass</div>

v在这里插入图片描述
注意上面这个示例:
color设置的是文本的颜色，background-color才是设置三个div盒子的颜色！！

类选择器多类名：

在标签class属性中写多个类名
多个类名中间必须用空格分开
这个标签可以分别具有这些类名的样式

    <style>
        .red {
            /* 背景颜色 */
            background-color: red;
            color: rgb(249, 244, 244);
        }
        .green {
            background-color: green;
        }
        .box {        
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="red box" >asdasd</div>
    <div class="green box">sdsdas</div>
    <div class="red box">asdass</div>

增加box类，但是页面结果和上一个示例相同。

多类名选择器在后期布局复杂的情况下，使用频繁

id选择器

类选择器(class)好比人的名字，人跟名字是多对多的关系，类选择器可以多次被调用。
id选择器好比人的身份证号码，全国唯一（id的唯一性）
id选择器一般用户唯一性的元素中，只能调用一次，经常和javascript搭配使用。

<!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>Document</title>
    <style>
        #green {
            color: green;
        }
    </style>
</head>

<body>
    <div id="green">找个朋友</div>
</body>

在这里插入图片描述

通配符选择器

选择所有的标签
特殊情况使用

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

CSS字体属性

#font {
    font-family: 'kaiti','Microsoft Yahei';
    font-size: 100px;
}

字体系列（font-family）

各种字体之间用逗号隔开
'Microsoft Yahei’这种有空格隔开的多单词字体，加引号
尽量使用系统默认自带的字体，保证在任何浏览器都能正确显示
最常见的几个字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

字体大小（font-size）

px是网页中最常用的单位
谷歌浏览器默认文字大小为16px
不同浏览器可能默认显示的字号不一样，尽量给出一个明确的大小，不要取默认值
可以给body指定整个页面文字的大小

字体粗细（font-weight）

bold（700）表示加粗， normal（400）表示默认值（当然还有其他形式）
可以用数字表示粗细（注意不要加px这样的单位）
学会让加粗标签不加粗（如 h2和strong),用id选择器给他们一个font-weight=100即可。

文字样式（font-style）

<style>
    h2 {
       font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 
    }
    #font {
        font-family: 'kaiti','Microsoft';
        font-style: normal;   
        font-size: 100px;
        font-weight: 800;
    }

</style>

<body >
    <em id="font">我是什么字体</em>
    <p >
        我是楷体
    </p>
</body>

请添加图片描述

如上图示例，让倾斜的<em>标签变的不倾斜。
normal:标准的字体样式，italic:斜体的字体样式。

CSS字体的复合属性：

    body {
        font: font-style font-weight font-size/line-height font-family;
        /* 字体样式(如斜体)   字体粗细      字体大小/行高    字体系列(微软雅黑)*/
    }

font-size/line-height font-family属性不能省略，这两项必须在font中，其他没填则是默认值。
使用font属性时，不能更换顺序，注意空格
复合属性感觉就是为了减少代码行数的一个功能

<style>
    body {
        font: normal 800 16px 'kaiti';
        /* 字体样式(如斜体)   字体粗细      字体大小         字体系列(微软雅黑)*/
    }
</style>

<body >
    <em>我是什么字体</em>
    <p >
        我是楷体
    </p>
</body>

结果：
请添加图片描述
em应该是把body的样式覆盖了。

CSS文本属性

1.文本颜色(color)

color属性定义文本颜色(预定义的颜色值red;rgb(255,0,0);十六进制#FF0000三种方式)
```
#green {   
    color: green;
}
```

2.对齐文本(text-align)

text-align属性用于设置元素内文本内容的水平对齐方式，

div {       /* 本质是让div盒子里面的文字水平居中对齐 */
    text-align: center/left(默认左对齐)/right;   
}

3.装饰文本(text-decoration)

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线，删除线，上划线等。
```
div {       /* 本质是让div盒子里面的文字水平居中对齐 */
    text-decoration: underline;   
}
```

属性值	描述
none	默认。没有装饰线（最常用）
underline	下划线。链接a自带下划线（常用）
overline	上划线。（几乎不用）
line-through	删除线。（不常用）

        .xia_hua {
            text-decoration: line-through;
            text-decoration: overline;     
        }

含这种类选择器的标签会显示上划线，删除线不显示。好像叫层叠性？

主要掌握添加下划线，删除下划线，其余了解即可。

3.文本缩进(text-indent)

text-indent属性用来指定文本的首行缩进，通常是将段落的首行缩进。
```
div {       /* 缩进10个像素 */
    text-indent: 10px;   
}
```

小tips:像素可以取负值。（试试）

    p{       /* 缩进当前元素2个文字大小的距离*/ 
        text-indent: 2em;   
    }

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

4.行间距(line-height)

line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。
```
div {       /* 缩进10个像素 */
    line-indent: 26px;   
}
```

请添加图片描述
如上图所示：缩进26px时，如果文本高度是16px,上间距和下间距各占5px。

CSS的三种样式表

1.行内样式表(行内式)

在元素标签内部的style属性中设定CSS样式。适用于修改简单样式。
没有体现结构与样式相分离的思想，不推荐使用。
下面是行内式引入的示例

<div style="color: pink;font-size: 20px;">行内样式表</div>

2.内部样式表(嵌入式)

写到html页面内部，是将所有的CSS代码放在style标签中
上文的例子都是内部样式表，理论上把<style>放在html文档的任何地方，但一般都放在<head>标签中。
通过此种方式，可以方便的控制当前整个页面的元素样式设置。

3.外部样式表(链接式)

实际开发中都是外部样式表，链接式引入。核心：样式单独写到CSS文件，再通过<link>标签引入这个文件。
引入外部样式表步骤：
1.新建一个后缀.css的样式文件，把所有的css代码都放在此文件中。
2.在HTML页面中，使用<link>标签引入这个文件。

<link rel="stylesheet" href="/static/css/mystyle.css">

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里指定为“stylesheet”,表示被链接的文档是一个样式表文件
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

荻风溪畔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS1day（基础选择器、字体、文本属性、样式表方式）

文章目录CSS选择器基础选择器CSS选择器基础选择器和复合选择器两个大类：基础选择器由单个选择器组成的包括：标签、类、id和通配符选择器基础选择器标签选择器：为页面中某一类标签指定统一的CSS样式。例如将<div>和<p>的所有标签选择出来进行设置样式。显然这类标签的缺点是不能进行差异化样式。例如：p {font-size: large;color: deeppink;}类选择器：差异化选择不同标签进行设置CSS样式。需要在标签中定义cla
复制链接

扫一扫