CSS样式表（1）

（1）css概念
- 引入css的三种方法
- - 行内式（内联样式）
  - 内部样式表（内嵌样式表）
  - 外部样式表（外链式）
（2）css选择器
- css基础选择器
- - 标签选择器
  - 类选择器
  - id选择器
  - 通配符选择器
（3）css文字文本样式
- font字体
- - 字体风格
  - 字体粗细
  - 字号大小
  - 字体
（4）css外观属性
- 文本颜色
- 文本水平对齐方式
- 行间距
- 首行缩进
- 文本修饰

（1）css概念

CSS（Cascading Style Sheet），CSS样式表或层叠样式表（级联样式表）

作用

设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式
css以html为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式

引入css的三种方法

行内式（内联样式）

概念

行内样式、行间样式
通过标签的style属性来设置元素的样式

基本语法

<标签名 style="属性1:属性值1;属性2:属性值2;"> 内容 </标签名>

多组属性值之间使用";"隔开

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

概念

内嵌式
将CSS代码集中写在HTML文档的head头部标签中，并用style标签定义

基本语法

<head><style type="text/css"[可省略]>选择器 {属性1:属性值1;属性2:属性值2;}</style>
</head>

只能控制当前页面

外部样式表（外链式）

概念

链入式
将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中
通过link标签将外部样式表文件链接到HTML文件中

基本语法

<link rel="stylesheet" type="text/css" href="css文件路径">

单标签
link标签放在head头部标签中，并指定link标签的三个属性

属性	作用
`rel`	定义当前文档与被链接文档之间的关系，`"stylesheet"`表示一个样式表文件
`type`	定义所链接文档的类型，`"text/css"`表示css样式表
`href`	定义所链接外部样式表文件的`URL`

（2）css选择器

作用
找到特定HTML页面元素

css基础选择器

标签选择器

概念
HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

语法

标签名 {属性1:属性值1; }

作用
把某一类标签全部选择出来

类选择器

使用"."（英文点号）进行标识，后面紧跟类名

• 类名选择器

.类名 {属性1:属性值1;
}

• 标签

<p class="类名"></p>

多类名选择（一个标签内部只能有一个class）

<span class="G font100">G</span>
<span class="two_o font100">o</span>
<span class="three_o font100">o</span>
<span class="G font100">g</span>
<span class="l font100">l</span>
<span class="e font100">e</span>

.font100 {font-size: 100px;
}
.G {color: blue;
}
.two_o {color: red;
}
.three_o {color: orange;
}
.l {color: green;
}

id选择器

使用#进行标识，后面紧跟id名
• id选择器

#id名 {属性1:属性值1;}

• 标签

<p id="id名"></p>

元素的id值是唯一的

通配符选择器

用*号标识
基本语法

* {属性1:属性值1;}

会匹配页面所有的元素，降低页面响应速度

尽量少用通用选择器*
尽量少用ID选择器
不使用无具体语义定义的标签选择器div span

（3）css文字文本样式

font字体

字体风格

.line_2 {font-style: italic;
}

属性	作用
`normal`	默认值，浏览器会显示标准的字体样式 font-style: normal;
`Italic`	浏览器会显示斜体的字体样式

字体粗细

.line_2 {font-weight: 700;
}

属性值	描述
`normal`	默认值（不加粗的）400
`bold`	定义粗体（加粗的）700
`100~900`	400 等同于 normal，而 700 等同于 bold

字号大小

body {font-size: 16px;
}

字体

.line_1 {font-family: "宋体";
}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体

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

中文字体需要加英文状态下的引号，英文字体一般不需要加引号
当需要设置英文字体时，英文字体名必须位于中文字体名之前
若字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号

Unicode字体

文件编码(GB2312、UTF-8）不匹配会产生乱码
xp系统不支持类似微软雅黑的中文

解决
（1）使用英文代替 font-family:"Microsoft Yahei"
（2）使用Unicode编码代替 font-family:"\5FAE\8F6F\96C5\9ED1"

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	`Microsoft YaHei`	`\5FAE\8F6F\96C5\9ED1`
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

基本语法

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

.p {font: italic 700 20px "微软雅黑";
}

注意
• 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开
• 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

（4）css外观属性

文本颜色

作用
color属性用于定义文本的颜色

表示	属性值
预定义的颜色值	red，green，blue，还有我们的御用色 pink
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

文本水平对齐方式

作用
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性

属性	解释
`left`	左对齐（默认值）
`right`	右对齐
`center`	居中对齐

是让盒子里面的内容水平居中，而不是让盒子居中对齐

行间距

作用
line-height属性用于设置行间距（行与行之间的距离）（字符的垂直距离）行高

单位
line-height常用属性值单位分别为像素px，相对值em和百分比%

一般情况下，行距比字号大7，8像素

首行缩进

作用
text-indent属性用于设置首行文本的缩进

属性值
可为不同单位的数量，em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值

1em就是一个字的宽度

p {text-indent:2em;
}

文本修饰

text-decoration 通常我们用于给链接修改装饰效果

值	描述
`none`	默认。定义标准的文本。取消下划线（最常用）
`underline`	定义文本下的一条线。下划线也是我们链接自带的（常用）
`overline`	定义文本上的一条线。（不用）
`line-through`	定义穿过文本下的一条线。（不常用）

前端笔记（3）css，选择器，文字文本属性，外观属性相关推荐

[前端笔记——HTML介绍] 4.HTML文本基础+超链接+高级文本格式
[前端笔记--HTML介绍] 4.HTML文本基础+超链接+高级文本格式 1.HTML文本基础 1.1标题和段落 1.2列表 1.2.1无序列表(unordered) 1.2.2有序列表(ordere ...
字节青训前端笔记 | 理解CSS
CSS 作为前端技术栈中关键一环,对页面元素及样式呈现起到了直接作用.本节课旨在通过对 CSS 的工作流程及原理.页面中 CSS 使用方法等详细解读,帮助前端新手建立对 CSS 的全面而深刻的认知. ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
Henry前端笔记之 CSS相关
Henry前端笔记之 CSS相关深入理解vertical-align和line-height的基友关系深入理解vertical-align和line-height的基友关系详见:基友理解 px. ...
前端笔记之CSS基础 - 字体和文本样式
目录 1.字体样式 1.1.字体大小 1.2.字体粗细 1.3.文字样式(是否倾斜) 1.4.字体 1.5.层叠性 1.6.字体font相关属性的连写 2.文本样式 2.1.文本缩进 2.2.文本水平 ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
(前端)HTML之CSS(选择器字体排版背景）
网页的三大基石 HTML:结构 CSS:美化 JavaScript:动态 1.认识CSS样式 CSS全称为"层叠样式表(Cascading Style Sheets)"主要 ...
Mr.J-- jQuery学习笔记(七)--CSS类操作文本值操作
不了解属性以及属性操作的同学可以看我之前的博客:Mr.J-- jQuery学习笔记(五)--属性及属性节点下面demo 中btn用到的角标,之前写验证码动态强度测试时也用过同样方法:Mr.J--密码 ...
CSS 笔记之 CSS 选择器
阅读目录介绍 CSS 的基本语法格式介绍基础选择器介绍组合选择器介绍伪选择器介绍其他一.CSS 的基本语法格式代码: <!DOCTYPE html> <html ...
写CSS选择器时标签的class属性值中有空格的问题
1 问题描述 HTML代码片段为: <div class="alert alert-warning">请至"随书下载"下载本书的示例程序. < ...

前端笔记（3）css，选择器，文字文本属性，外观属性

CSS样式表（1）

（1）css概念

引入css的三种方法

行内式（内联样式）

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

外部样式表（外链式）

（2）css选择器

css基础选择器

标签选择器

类选择器

id选择器

通配符选择器

（3）css文字文本样式

font字体

字体风格

字体粗细

字号大小

字体

（4）css外观属性

文本颜色

文本水平对齐方式

行间距

首行缩进

文本修饰

前端笔记（3）css，选择器，文字文本属性，外观属性相关推荐

最新文章

热门文章