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

标题: 王涛-20221012-CSS1 [打印本页]

作者: 黑桃K 时间: 2022-10-12 23:27
标题: 王涛-20221012-CSS1
CSS
* 基本概念

* css是层叠样式表（cascading style sheet ）的简称，css也是一直标记语言，可以给html书写出的网页，设置不同的样式
* 语法规范

* h1{color:red;font-size:14px}选择器{属性：属性值；属性：属性值；...}
* 注意点

* 1.选择器是用于指定css格式的html标签，{}里面是对该选择器设置的具体条件
* 2.属性和属性值是以“键值对”的形式出现
* 3.属性是一种特定的样式属性，例如：颜色，大小
* 4.属性和属性值用英文":"隔开
* 5.多个键值对之间用英文分号";"隔开
* 样式一般写在head标签中的style标签中(练习格式时的主要用法)
* CSS基础选择器

* 标签选择器(元素选择器)

* 标签选择器是指用html标签名作为选择器，对页面中所有符合条件的一类标签指定统一的css样式
* 语法
* 优点：能快速设置页面一类标签样式
* 缺点：不能差异化设置样式
* 类选择器

* 差异化选择不同的标签可以使用类选择器
* 先在head标签内设置，后再body标签内的需要的地方增加class对应
* 语法
* 语法

* 1.类选择器用英文的.经行定义，后加类名
* 2.长类名一般用横线-进行连接
* 3.不要使用纯数字、中文进行命名，使用英文命名
* 4.类的命名要用意义，使人能看懂
* 多类名的使用

* 1.在标签class属性中写多个类目，可以进行多类名调用
* 2.多个类名之间要用空格隔开
* 3.调用完后就会会显示所有被调用的类名声明格式
* ID选择器

* 什么时id选择器

* id时唯一的标识，所以id选择器时唯一的id的HTML元素来指定的特定样式
* id选择器用井号#来进行定义，用id来调用
* id属性最好只调用一次(多次调用可生效，不建议使用)
* id选择器与类选择器的区别

* 1.类选择器好比人名，一个标签可以多个类，同个类也可以多次被调用
* 2.di选择器相当于身份证号码，唯一不得重复
* 3.id选择器只能被调用一次，类选择器可多次调用
* 4.id选择器一般运用于唯一性元素，搭配JS使用；类选择器在修改格式中调用比较频繁
* 通配符选择器

* 在css中，通配符选择器用星号*定义，他代表选择页面中的所以元素
* 通配符选择器不需要进行调用，直接给所有的元素设定样式
* CSS的字体属性

* font-family字体外观

* 注意点

* 各个字体之间使用英文逗号,隔开
* 一般情况下，使用默认字体，保证用户在任何浏览器打开都可正常显示
* 如果字体的名字有空格，要用英文引号连起来""
* CSS Unicode字体(不常用)

* 在css字体设置中，如果要避免乱码情况，可以使用Unicode编码进行字体声明，避免乱码
* font-size字体大小

* 1.一般设置字体时采用单位时px(像素值)
* 2.谷歌浏览器默认16px
* 3.可以给body标签中指定文字大小样式，来改变整个文字大小
* 4.不同浏览器默认显示字体大小不同，尽量设置明确的大小，不要使用默认大小
* font-style字体风格

* 常用的属性值：

* normal：默认值，浏览器会显示标准的字体样式
* italic：将字体调整为斜体样式
* 注意

* 平时很少给文字添加倾斜，多把倾斜字体em/i改为正常字体
*
* font-weight字体粗细

* CSS使用font-weight设置文本的粗细
* 400代表正常粗细，700代表加粗
* 数值后面不能加px单位
*
* 字体的复合属性

* 字体属性可以把以上的文字样式来进行综合书写，这样我们可以使代码更加精简，开发常用此方式
* 语法格式
* 注意点

* 1.使用font属性时，必须严格按照属性顺序书写，不可以更换顺序，各属性用空格隔开
* 2.可以省略的属性为font-style、font-weight，不可省略的值：font-size、font-family
* 3.line-height是为了设置行高

* 具体的像素值：*px
* 也可用倍数设置：*
* CSS文本属性

* 文本颜色color

* 1.英文单词代表颜色
* 2.16进制码代表颜色-----常用
* 3.RGB代表颜色
*
* 文本对齐text-align

* 1.center居中对齐----常用
* 2.right右对齐
* 3.left左对齐
*
* 装饰文本text-decoration

* 1.none默认，没有文本装饰(a标签取消下划线)----常用
* 2.underline下划线
* 3.line-through删除线----常用
* 4.overline上划线
*
* 缩进文本text-indent

* 1.像素值缩进：**px----固定像素大小
* 2.单位缩进：**em----根据font-size自动计算
*
* 行间距/行高line-height

* 1.具体像素值、2.倍数设置
* CSS引入方式

* 行内样式表（行内式）

* 行内样式是在元素标签内部的style属性来设置css样式，简单样式修改，不常用
* 注意

* 1.行内样式也需符合css书写规范
* 2.样式要写在style属性中，用双引号引起来
* 3.书写繁琐，没有实现结构样式分离
* 内部样式表（嵌入式）

* 写在html页面内部的，将所有的css标签都写着style标签中
* 同样也没实现结构样式分离----练习使用
* 外部样式表（链接式）

* 外部样式表是我们实际开发中最常用的方式，首先创建一个css文件，放入我们所需的样式，再在html文件引入样式文件
* 引入外部标签步骤

* 1.创建后缀名为.css的样式
* 2、在html文件head中，使用link标签引入
* 整合多个外部样式表集中导入

* 先整合多个外部样式，使用多个@import url（文件位置）合并多个样式
* 在html文件head中，使用link标签引入整合文件
* link属性

* rel：定义当前文档与被链接文档的关系，这里直接写成stylesheet即可，表示被链接的文档是一个样式表文件
* href：定义引入文件的路径
* Emmet语法

* 1.可以直接补全标签：tab
* 2.生成N个标签：标签*N
* 3.生成包含级标签：标签>标签
* 4.生成并列关系标签：标签+标签
* 5.生成带id属性的标签：标签#名称
* 6.生成带类名的标签：标签.名称
* 7.生成N个自增的标签：标签.demo$*N
* 8.生成N个同内容标签：标签{内容}*N
* 9.快速生成css代码：直接拼写单词首字母
* 10.快速格式化：alt+shift+F

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