CSS选择器、font、文本、引入方式

日子如影儿

已于 2022-09-22 08:55:20 修改

阅读量560

点赞数

文章标签： css 前端 html

于 2022-09-11 19:58:34 首次发布

本文链接：https://blog.csdn.net/m0_58035213/article/details/126806100

版权

CSS笔记同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

前端

16 篇文章 0 订阅

订阅专栏

HTML：只关注内容的语义

<h1>大标题

<p>段落

<img>图片

<a>链接

CSS-网页的美容师

CSS即：层叠样式表（Cascading Style sheets）也称CSS样式表或级联样式表

CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构HTML和样式CSS相分离。

CSS规则：选择器一条或多条声明

h1{color：red； font-size：25px；}

选择器{声明；声明；}

选择器{属性：值；属性：值；}

<head>
<style>
    p{
        color:red;
        }
</style>
</head>

<body>
    <p>有点意思</p>
</body>

font-size:12px;像素

选择器{样式} 即给谁改样式{改什么样式}

样式格式书写：展开格式

h3{

color：pink;

font-size:20px;

}

样式用小写字母

·h3空格{

color：空格pink；

}

CSS选择器作用：选择标签用的

CSS 选择器：选对人设置标签样式(做对事）

选择器：

基础选择器：由单个选择器组成：标签\类\id\通配符选择器

复合选择器

①标签选择器

标签名{

属性1：属性值1；er5

属性2：属性值2；

...

}

②类选择器

（差异化选择不同的标签）

类名{

属性1：属性值1；

...

}

.red {

color: red;

}

结构需要用class属性来调用class

类选择器口诀：样式点定义结构类class调用一个或多个开发最常用

长名称或词组可用中横线来为选择器命名尽量用英文字母来表示

类选择器——多类名

1、在标签class属性中写多个类名

2、多个类名中间必须用空格分开

③id选择器

id属性只能在每个HTML文档中出现一次

口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。

<style>
    #pink{
        color:pink;
    }
</style>
</head>
<body>
    <div id="pink">shoto小狗</div>
</body>

④通配符选择器

*表示选取页面中所有元素（标签）

属性1：属性值1；

...

}

通配符选择器不需要调用，自动就给所有的元素使用样式

特殊情况才使用

（清除所有元素标签的内外边距）

margin：0；

padding：0；

}

选择器总结：

标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	使用情况较多	用法 p{color：red；}
类选择器	可以选出1个或多个标签	可以根据需求选择	非常多	.nav{color:red;}
id选择器	一次只能选择1个标签	ID属性只能在每个HTML文档中出现一次	一般和js搭配	#nav{color:red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	*{color：red；}

font系列

①字体

电脑无第一个字体会找下一个

div{font-family:Arial,"Microsoft Yahei","微软雅黑";}

各种字体间用英文状态下的逗号隔开，有空格隔开的多个单词组成的字体，加引号。

body{font-family:"Microsoft YaHei"} 可以给body设置字体

②字号大小

可以给body指定整个页面文字的大小

单位：px

body{

font-size:16px;

}

标题标签比较特殊，需要单独指定文字大小

h2 {

font-size:18px;

}

③字体粗细

font-weight：normal（默认）正常的字体，相当于number中的400|bold粗体|bolder特粗体|lighter细体|number最常使用

.bold {
        font-weight:700;/*font-weight:bold;*/
    }
h2 {
        font-weight:400;/*font-weight:normal;*/
    }

<h2>pink的秘密</h2>
<p class ="bolder">前端总是伴随快乐</p>

如果文字特别重要，用strong标签更好

number中700等同于bold 数字后不跟单位

④文字样式

font-style:normal默认值 italic斜体

p {

font-style:normal;

}

比较常见的时：让倾斜的字体不倾斜

<style>

em{

font-style:normal;

}

</style>

<body>

</body>

⑤font复合属性写法（简写）

不可调换位置用空格隔开

font:font-style font-weight font-size/line-height font-family

font-size 字号和font-family字体这2个属性必须保留

不需要设置的属性可以省略（取默认值）

例如：

font：italic 700 16px 'Microsoft yahei';

字体总结：

font-size	字号	单位：px
font-family	字体
font-weight	字体粗细	加粗：700不加单位/bold 不加粗：normol/400
font-style	字体样式	倾斜：italic 不倾斜：normal
font	字体连写	不能随意换位置font:font-style font-weight font-size/line-height font-family

文本

①文本颜色

div {

color :red;

}

预定义的颜色值： red green blue pink

十六进制： #FF0000

红绿蓝 rgb （255，0，0）或rgb（100%，0%，0%）

②文本对齐

text-align：水平对齐方式

left right center

div {

text-align:center;

}

③文本装饰 text-decoration

none 默认，没装饰线（最常用）

underline 下划线（常用）（链接自带）

overline 上划线

line-through 删除线

怎么删除下划线? 取消a默认的下划线

a {

text-decoration：none；

}

<a href="#">粉红色的回忆</a>

添加下划线

div {

text-decoration：underline；

}

④ 文本缩进 text-indent

常用于：段落的首行缩进

文本的第一行首行缩进多少距离

text-indent：20px；

2em：缩进当前元素 2个文字大小的距离

text-indent：2em；

em是一个相对单位（常用）

⑤行间距 line-height

控制行与行之间的距离

即改变上下间距

p {

line-height： 26px；

}

若文本高度为15px 行间距为25px 那么上/下间距（相同）：5px

⑥文本总结

color 通常用十六进制

text-align 设置文字水平的对齐方式

text-indent 通常段落缩进2个字 2em

text-decoration 添加下划线：underline 取消：none

line-height 行与行之间距

CSS的引入方式（样式书写位置)

样式表：

行内样式表（行内式）

内部样式表（嵌入式）

外部样式表（链接式）

①内部样式表（内嵌样式表）

嵌入式引入

是将所有的CSS代码抽取出来，单独放到一个<style>标签中，一般放在<head>中

可以控制当前整个页面中的元素样式设置

就是在html页面内部写样式，但是是单独写到style标签内部

②行内样式表（内联样式表）

行内式引入

在元素标签内部的style属性中设定CSS样式

注意双引号

只能控制当前的标签

没有体现出结构与样式相分离

只有对当前元素添加简单样式时推荐使用

③外部样式表（实际开发用这种）

外联式/链接式引入

样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用

步骤：1、新建.CSS文件内（不用写<style>标签）只写样式没标签

2、在HTML页面<head>里，用<link>引入文件<link rel="stylesheet" href="CSS文件路径">

④总结

行内样式表	书写方便，权重高	结构样式混写		控制一个标签
内部样式表	部分结构和样式相分离	没彻底分离		控制一个页面
外部样式表	完全实现结构和样式分离	需引入	推荐	控制多个页面

#666666 可以简写为#666

#ff00ff可以简写为#f0f

必须是两两相同