CSS基础学习——文本选择设置字体和引入方式

一. CSS基础学习

  1. 作用:网页的美化师

  2. 语法规范

       CSS基础学习——文本选择设置字体和引入方式_第1张图片

         选择器的作用:选择标签

  3. 选择器

       CSS基础学习——文本选择设置字体和引入方式_第2张图片

            1》.标签选择器:写上标签名(只能全选)

            2》.类选择器:口诀:样式点调用,结构类调用(class),一个或多个,开发最常用。 

                

             CSS基础学习——文本选择设置字体和引入方式_第3张图片

           3.》多类名选择器:

              使用方式:

             CSS基础学习——文本选择设置字体和引入方式_第4张图片

               使用场景:公共样式放在同一个类名里面

           4》.id选择器:

              口诀:样式#定义,结构id调用,且只能调用一次,别人不可使用

              CSS基础学习——文本选择设置字体和引入方式_第5张图片

              CSS基础学习——文本选择设置字体和引入方式_第6张图片   

            5》.通配符选择器:通配符选择器使用*号定义,表示选取页面中所有元素   

             CSS基础学习——文本选择设置字体和引入方式_第7张图片

  4. css之字体属性

           CSS基础学习——文本选择设置字体和引入方式_第8张图片

           1.font_family定义:字体系列,使用font—family定义

           

          CSS基础学习——文本选择设置字体和引入方式_第9张图片

         2.font_size定义文字大小,标题标签必须单独定义

         CSS基础学习——文本选择设置字体和引入方式_第10张图片

        3.font_weight:用于定义字体粗细

        CSS基础学习——文本选择设置字体和引入方式_第11张图片

        400:normal正常,700:bold加粗    等等

       4.font_style:字体风格(倾斜不倾斜)

       CSS基础学习——文本选择设置字体和引入方式_第12张图片

      5.font复合属性写法:节约代码

        CSS基础学习——文本选择设置字体和引入方式_第13张图片

 5. CSS文本属性

        CSS基础学习——文本选择设置字体和引入方式_第14张图片

        1.文本颜色:color: 属性值

         CSS基础学习——文本选择设置字体和引入方式_第15张图片

       2.对齐文本:text_align:属性值

       3.装饰文本:text_decoration:属性值(underline,line_through等),给文本装饰

       4.文本缩进:text_indent:属性值,只给文本第一行缩进。

            一个em相当于一个文字大小

       5.行间距:line_height:属性值,行与行之间的距离 

        

 6.  CSS引入方式

         CSS基础学习——文本选择设置字体和引入方式_第16张图片

        行内样式表:

         CSS基础学习——文本选择设置字体和引入方式_第17张图片

       内部样式表:

         

        外部样式表:

         

你可能感兴趣的:(CSS基础学习——文本选择设置字体和引入方式)