菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 李扬敏-20221012-css1 [打印本页]

作者: 王源的李可爱 时间: 2022-10-12 23:33
标题: 李扬敏-20221012-css1
一.今日学习内容

CSS

一．概念

1.css是层叠样式表（Cascading Style Sheet）,css也是一种标记语言，可以给HTML书写出网页设置不同的样式

2.语法规范

h1(选择器){color(属性):red（属性值）;font-size:14px;}

3.注意

1).选择器是用于指定css样式的HTML标签，{}里面是对选择器设置的具体样式

2).属性和属性值以键值对形式出现

3).属性是一种特定的样式属性，比如：字体颜色，大小

4).属性和属性值之间用;隔开

5).多个键值对用;隔开

二．css基础选择器

1.标签选择器（元素选择器）

用HTML标签名作为选择器，对页面所有这类标签指定统一样式

优点：快速设置页面中一类标签的样式

缺点：不能差异化设置样式

2.类选择器

差异化选择不同的标签可以使用类选择器

PS：1.用.定义，后跟类名 2.长类名用"—"连接，不要用纯数字和中文 3.用英文字母 4.类名要有意义。

多类名之间用空格隔开

3.id选择器

唯一标识，指定特定样式

用#定义，id来调用

4.id和类选择器的区别

一个类可以被多个标签调用

id唯一不能重复，只能使用一次，经常搭配JS，类可以使用多次

类使用的频率最高

5.通配符选择器

用*表示，表示页面所有元素

不需要调用，直接设置所有的元素样式

三．字体属性

1.font-family(字体外观)

字体之间用，（英文的逗号）隔开

一般使用默认字体，保证浏览器正确显示

如果字体名字有空格，用“”将字体名字引起来

css的Unicode字体

避免乱码时使用Unicode编码来进行声明

2.font-size（字体大小）

单位是px

谷歌默认16px

可以给body标签指定文字大小，改变整个页面的字体大小

不同浏览器默认字体大小不同，尽量设置一个明确的字体大小，不要使用默认

3.font-style（字体样式）

normal（默认值）

italic：斜体（很少用，多数将斜体改为不倾斜）

4.font-weight（字体粗细）

正常是400，常用700,（100-900）

不能带像素单位px

5.字体的复合属性

把以上文字样式综合书写，精简代码（常用）

font：font-style font-weight font-size/line-height font-family;

行高：line-height

直接写像素值，例：40px/40px

设置倍数：40px/2

在body中设置40px/2，其他在设置font-size：20px，行高依旧是二倍

不能更换顺序，用空格隔开

可以省略：font-style和font-weight 不可省略：font-size和font-family;

四．文本属性

1.color（文本颜色）

英文单词：red

16进制：#000000（黑色）（最常用）

RGB表示：rgb(138,69,69)

2.text-align(文本对齐)

center,left,right

3.text-decoration(文本装饰)

none：没有文本装饰（常用）（主要取消a标签下划线）

line-through：删除线（常用）（主要价格删除样式）

underline：下划线

overline：上划线

4.text-indent(缩进)

2em（缩进两个单位，就是两个文字）

20px(像素值缩进)

五．三种引入方式

1.行内样式表（行内式）

在标签内部：style="color:red;"(要符合css书写规范，没有实现样式结构分离)

2.内部样式表（嵌入式）

在head中写<style>标签（也没有实现样式结构分离）

3.外部样式表（链接式）（常用）

创建后缀名为.css的文件

在html中使用<link>引入

rel="stylesheet" ：定义当前文档与被链接文档的关系，直接写成stylesheet

href="css样式的路径"

4.整合多个外部样式表集中导入

六．Emmet语法

一次性生成多个：标签*数字（div*5）

父子标签：标签>标签（div>p）

兄弟标签：标签+标签（div+p）

带有id属性的标签：标签名+#+名字（p#one）

生成类名标签：标签+.+名字(p.one)

自增：标签+.+名字+$+*+数字(p.demo$*5)

多个相同标签内容：标签+{+内容+}+*+数字（ div{我是div}*5 ）

快速生成代码：首字母（tac->text-align:center;）

更新代码：alt+shift+f

二.今日问题

无

三.解决方案

无

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)