前端学习Day4 CSS基础笔记

目标

能够说出什么是CSS

能够使用CSS基础选择器

能够设置字体样式

能够设置文本样式

能够说出CSS的三种引入方式

能够使用Chrome调试工具调试样式

CSS:层叠样式表(Cascading style sheets)

语法：写在head里面

<style>

p

{

color: brown; //文字变色

font-size: 30px;//字变大

background-color: blue;//背景色为蓝色

width: 400px;

height: 400px;

}

</style>

CSS引入方式

内嵌式： CSS写在style标签中

提示: style标签虽然可以写在页面任意位置，但是通常约定写在head标签中

外联式：CSS写在一个单独的.css文件中

提示:需要通过link标签在网页中引入

行内式：CSS写在标签的style属性中

提示:之后会配合js使用

基础选择器

1.标签选择器

结构:标签名{ css属性名:属性值;}

2.类选择器

结构:.类名{ css属性名:属性值;}

作用:通过类名，找到页面中所有带有这个类名的标签，设置样式注意点:

1.所有标签上都有class属性，class属性的属性值称为类名(类似于名字)

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

3.一个标签可以同时有多个类名，类名之间以空格隔开

4．类名可以重复，一个类选择器可以向时选中多个标签

3.id选择器

结构: #id属性值{ css属性名:属性值;}

作用:通过id属性值，找到页面中带有这个id属性值的标签，设置样式注意点:

1．所有标签上都有id属性

2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!

3.一个标签上只能有一个id属性值

4.一个id选择器只能选中一个标签

4.通配符选择器

结构: *{ css属性名∶属性值;}

作用:找到页面中所有的标签，设置样式

文字样式

1.字体样式

1. 字体大小: font-size

2.字体粗细:font-weight

400-normal 700-bolder

3.字体样式: font-style

正常（默认值) : normal倾斜:italic

4.字体类型: font-family

属性名: font-family

常见取值:具体字体1,具体字体2,具体字体3,具体字体4.字体系列

具体字体: "Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等.......

字体系列: sans-serif、serif、monospace等......

渲染规则:

1．从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体

2．如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

5.字体类型:font属性连写

属性名: font(复合属性)

取值:

font : style weight size family;

省略要求:只能省略前两个，如果省略了相当于设置了默认值

注意点:如果需要同时设置单独和连写形式

要么把单独的样式写在连写的下面

要么把单独的样式写在连写的里面

2文本样式

1. 文本缩进:text-indent

取值:数字+px

数字+em(推荐: 1em =当前标签的font-size的大小)

2. 文本水平对齐方式: text-align

取值:

left左对齐

center

right右对齐

注意点:

如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

3. 文本修饰: text-decoration

取值:

效果

underline下划线（常用)

line-through删除线（不常用)

overline上划线(几乎不用)

none无装饰线（常用)

注意点:

开发中会使用text-decoration : none;清除a标签默认的下划线

3.行高：

作用:控制一行的上下行间距

属性名: line-height

取值:

数字+px

倍数（当前标签font-size的倍数)应用:

1.让单行文本垂直居中可以设置line-height :文字父元素高度

2.网页精准布局时，会设置line-height : 1 可以取消上下间距

行高与font连写的注意点:

如果同时设置了行高和font连写，注意覆盖问题

font : style weight size/line-height family ;