目录

一、体验CSS

1.CSS定义：

层叠样式表，是一种样式表语言，用来描述HTML文档的呈现。

书写位置：title标签下方添加style双标签，style标签里面书写CSS代码。

体验 CSS

二、CSS引入方式

1)内部样式表：学习使用

    css代码写在style标签里面

2)外部样式表：开发使用,实际工作中用

     css代码写在单独的css文件中（.css）

      在HTML使用link标签引入

3)行内样式：配合JavaScript使用

  css写在标签是style属性值里

这是div标签

练习：内部样式表前面已经演示过，需要写到style标签里面

这是外部样式表，在没做引入时没有任何效果，就是单独的文字

想要文字效果就需要建立新的单独的css文件

新建my.css文件，将p标签引入到该文件中

引入外部样式表，使用link标签写在title标签下面 

在浏览器中查看，此时p标签中文字有效果，变成红色了

 也可以在div标签里面加入属性

三、选择器-标签和类

作用：查找标签，设置样式

基础选择器：

——标签选择器：使用标签名作为选择器—>选中同名标签设置相同的样式。

——类选择器：查找标签，差异化设置标签的显示效果

步骤：定义类选择器——.类名

          使用类选择器——标签添加 class="类名"

注意：

类名自定义，不要用纯数字或者中文，尽量用英文命名

一个类选择器可以供多个标签使用

一个标签可以使用多个类名，类名之间用空格隔开

举例:

四、选择器-id和通配符

1.id选择器

作用：查找标签，差异化设置标签的显示效果

场景：id选择器一般配合JavaScript使用，很少用来设置CSS样式

步骤：

——定义id选择器—— #id名

——使用id选择器——标签添加 id="id名"

规则：同一个id选择器在一个页面只能使用一次

2.通配符选择器

作用：查找页面所有标签，设置相同样式

通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

* {
   color：red；
}

    
    
    
    


    
p 标签
    
div 标签
    
h1 标签
    

        
li
        
li
        
li
    
    strong 

五、画盒子

目标：使用合适的选择器画盒子——类选择器 

新属性：

    
    
    
    


    
div 1
    
div 2

六、字体修饰属性-大小和粗细和倾斜

1.字体大小

属性名：font-size

属性值：文字尺寸,PC端网页最常用的单位px

p {

   font-size: 30px；

}

    
    
    
    


    
测试字体大小
    
测试默认字体大小

将鼠标放到相应文字上面，左边显示框就会显示文字大小 

2.字体粗细

属性名：font-weight

属性值：数字（开发使用）

             

              关键字

             

            

3.字体样式（是否倾斜）

作用：清除文字默认的倾斜效果

属性名：font-style

属性值：正常（不倾斜）：normal   —— em标签

               倾斜：italic                        ——div标签

七、行高

作用：设置多行文本的间距

属性名：line-height

属性值：数字+px

              数字（当前标签font-size属性值的倍数）

行高：

行高——垂直居中：行高属性值等于盒子高度属性值

八、字体族

属性名：font-family

属性值：字体名

font-family：楷体

九、font属性

font复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。

font：是否倾斜  是否加粗  字号/行高  字体（必须按顺序书写）

注意：字号和字体值必须书写，否则font属性不生效

一个属性对应多个值，按顺序书写，字号和字体必须写！！！

十、文本修饰属性-缩进和对齐和修饰线

1.文本缩进

属性名：text-indent

属性值：数字 + px

               数字 + em(推荐：1em = 当前标签的字号大小)

              

2.文本对齐

作用：控制内容水平对齐方式

属性名：text-align

属性值：

！！！！居中的是文字内容，不是内容

3.水平对齐方式——图片

text-align 本质是控制内容的对齐方式，属性要设置给内容的父级

4.文本修饰线

属性名：text-decoration

属性值：

没加任何属性值时：

加入相应的属性值：

十一、文字颜色

color文字颜色

属性名：color

属性值：