|
今日学习内容： 一、CSS的基本概念 SS是层叠样式表（Cascading StyleSheet）的简称，CSS也是一种标记语言，可以给HTML书写出来的网页设置不同的样式 二、CSS的语法规范 h1 {color:red;font-size:14px;} 语法注意点 1、选择器是用于指定CSS样式的HTML标签，{}里面是对该选择器设置的具体样式 2、属性和属性值是以“键值对”的形式出现 3、属性是一种特定的样式属性，例如：字体颜色，字体大小等等 4、属性和属性值之间要用英文的“:”隔开 5、多个“键值对”之间要用英文的";"来隔开 样式一般写在head标签中的style标签内（练习样式时的主要用法） 三、CSS的基础选择器 1.标签选择器（元素选择器） 标签选择器是指用HTML标签名作为选择器，对页面中所有的符合条件的一类标签来指定统一的CSS样式。 语法： 优点： 能快速设置页面中一类标签的样式 缺点 不能差异化设置样式 2.类选择器 差异化选择不同的标签，可以使用类选择器 语法： 语法注意： 2.1、类选择器用英文的“.”来进行定义，后面要跟类名 2.2、长类名一般可以用横线来进行连接 2.3、不要使用纯数字、中文等进行命名，要使用英文字母来命名 3.多类名的使用 3.1、在标签class属性中写多个类名可以进行多类名调用 3.2、多个类名之间要用空格隔开 3.3、调用完后就会显示所有被调用类名所声明的样式 4.ID选择器 什么是类选择器 id是唯一标识，所以id选择器主要是为了唯一的id的HTML元素来指定特定的样式 id选择器用"#"来进行定义，用id来进行调用 id选择器和类选择器之间的区别 4.1、类选择器好比人名，一个人可以有多个名字，同一个名字也可以被多个人使用。 4.2、id选择器相当于身份证号码，全国唯一，不得重复 4.3、id选择器在一个网页中只能使用一次，类选择器可以使用多次 4.4、类选择器在修改样式中使用的频率最高，id选择器一般用于页面的唯一性的元素上，经常搭配JS来使用 5.通配符选择器 在CSS中，通配符选择器用“*”来定义，它表示选择页面中的所有元素。 通配符选择器不需要进行调用，可以直接给所有的元素设置样式 四、CSS的字体属性 1.font-family（字体外观） 注意点： 各个字体之间必须使用英文的“,”来隔开 一般情况下，进行使用系统默认的字体，保证在任何用户浏览器中都可以正确显示 如果字体的名字有空格，需要用“”将字体名字引起来 CSS Unicode字体 在CSS的字体设置中，如果要避免乱码的情况出现，可以使用Unicode编码来进行字体声明 2.font-size（字体大小） 2.1、一般设置字体的时候采用的单位是px（像素值） 2.2、谷歌浏览器的默认字体大小是16px 2.3、可以给body标签中指定文字大小样式，来改变整个页面的文字大小 2.4、不同的浏览器可能默认显示的字体大小不一样，我们尽量设置一个明确的字体大小，不要使用默认大小 3.font-style（字体的样式） 常用的属性值 normal：默认值，浏览器会显示标准的字体样式 italic：将字体调整为斜体样式 注意： 平时我们很少去给文字添加斜体样式，反而更多的是将斜体标签（em/i）改为不倾斜字体 4.font-weight（设置字体的粗细） CSS使用font-weight来设置文本的粗细 常用数值 400代表正常的字体粗细 700代表加粗的字体粗细 注意数值后面不要px单位 5.字体的复合属性 字体属性可以把以上的文字样式来进行综合书写，这样可以使代码更加精简，开发中也经常采用这种方式 语法格式 注意点 使用font属性时，必须按照严格的语法格式中属性值的顺序来进行书写，不可以随便更换顺序，各个属性要用空格隔开 可以省略的值：font-style 和 font-weight 不可省略的值：font-size 和 font-family line-height是为了设置行高 具体的像素值设置和倍数设置都可以 五、CSS的文本属性 1.文本颜色 可以使用16进制、RGB以及英文单词来表示颜色，实际开发中最常用的是16进制颜色 2.文本对齐 text-align-center 居中对齐 3.文本装饰 text-decoration属性来设置文本的装饰，使用最多的属性值是line-through（价格删除样式）和none（主要用在给a标签来取消下划线） 4.文本缩进 text-indent属性来对指定文本的第一行进行缩进 可以使用具体的像素值来进行缩进 使用em单位来进行缩进 em是一个相对单位，就是当前元素的一个文字的大小，所以想要缩进两个font-size的单位时，将text-indent的值写成2em即可 5.行间距 line-height属性用于设置行间的距离（行高 可以写具体的像素值，也可以用倍数来进行设置。 六、CSS的三种引入方式 1.行内样式表（行内式 行内样式表实在元素标签内部的style属性中来设置CSS样式 ，适合于简单的样式修改 注意点 1.1、行内样式书写的时候要符合css的书写规范 1.2、样式要写在style属性中，要用双引号来引起来 1.3、书写繁琐，没有实现结构样式分离的思想 2.内部样式表（嵌入式） 写到html页面内部的，将所有的CSS代码都写到style标签中 注意 2.1、内部样式表也没实现结构和样式分离 2.2、练习的时候可以使用这种形式 3.外部样式表（链接式） 外部样式表是我们实际开发中最常用的方式，首先创建一个css文件中，放入我们所需要的样式，然后再html文件中引入样式文件即可 引入外部样式表的步骤 3.1、创建后缀名为.css的样式文件 3.2、在HTML文件中，使用<link>标签来进行引入 link属性 rel 定义当前文档与被链接文档的关系，这里直接写成stylesheet即可，表示被链接的文档是一个样式表文件 href 定义引入文件的路径 4.整合多个外部样式表集中导入 样式表1 样式表2 集中样式表 导入
| 
楼主
