HTML&CSS学习总结—03

CSS层叠样式表(一)

  • CSS简介

    CSS是层叠样式表,简称样式表或级联样式表。它是一种标记语言,主要用于设置HTML页面中的文本格式、图片格式和版面布局等样式。
    CSS由选择器声明组成,声明由属性属性值组成,多个声明之间用“;”分隔,即 选择器 {样式; 样式;…}。

  • CSS基础选择器

    • 标签选择器

      • 语法格式

        标签名 {
        			属性1:属性值1;
        			属性2:属性值2;
        			属性3:属性值3;
        			...
        		}
        <style>
        	div {
            		color: pink;
        		}
        </style>
        

        标签选择器是用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式,但是不能进行差异化设置。

    • 类选择器

      • 语法格式

        .类名{
        		属性1:属性值1;
        		属性2:属性值2;
        		属性3:属性值3;
        		...
        	}
        
        <style>
        	.red {
        		color: red;
        	  	 }
        </style>
        
        <p class="red">这是红色字体</p>
        

        类选择器使用“.”进行标识,后面紧跟自己定义的类名。通常用来差异化选择不同标签。

      • 多类名

          ```
          <style>
                  .box {
                      width: 200px;
                      height: 100px;
                      font-size: 50px;
                  	}
          
                  .red {
                      /* 背景颜色 */
                      background-color: red;
                  }
          
          </style>
        
              <div class="red box"> </div>
          ```
        

        一个标签可以指定多个类名,从而达到使用多种样式的目的。在标签的class属性中写多个类名,类名之间用空格分开
        多类名开发可以将一些标签使用的相同样式放到同一个类中,这些标签可以调用这个公共类,然后再调用自己独有的类。

    • id选择器

      • 语法格式

        #类名{
        		属性1:属性值1;
        		属性2:属性值2;
        		属性3:属性值3;
        		...
        	}
        
        <style>
        	#red {
        		color: red;
        	  	 }
        </style>
        
        <p id="red">这是红色字体</p>
        

        id选择器可以利用标签中的id属性为标签指定特定样式,以#定义,以id调用。在每个HTML文档中,id选择器只能出现一次。

    • 通配符选择器

      • 语法格式

        * {
        		属性1:属性值1;
        		属性2:属性值2;
        		属性3:属性值3;
        		...
        	}
        
        <style>
        	  * {
        		color: red;
        	  	 }
        </style>
        

        通配符选择器用*定义,其不需要调用,自动给所有元素赋予样式。

    • 总结

基础选择器作用特点
标签选择器可以选出所有相同的标签不能差异化选择
类选择器可以选出1个或多个标签可以根据需求选择
id选择器一次只能选择一个标签id属性只能在每个HTML文档中出现一次
通配符选择器选择所有标签特殊情况使用
  • CSS字体属性
    • 字体系列

      • 语法格式

        <style>
            h1 {
                font-family: Microsoft Yahei;
            }
            p {
                font-family: 'Times New Roman', Times, serif;
            }
        </style>
        

        font-family用来定义字体系列,字体之间要用英文逗号分隔,由多个单词组成的字体名称需要加引号。
        尽量使用系统自带字体,确保用户的浏览器兼容。

      • 字体大小

        • 语法格式

          <style>
              /* 标题标签比较特殊,需要单独指定文字大小 */
              h1 {
                  font-size: 50px;
              }
              p {
                  font-size: 20px;
              }
          </style>
          

          font-size用来定义字体大小,在定义字体大小时一定要加单位px,谷歌浏览器默认的字体大小为16px。
          可以给body指定整个页面文字的大小。

      • 字体粗细

        • 语法格式

          	<style>
                  .weight-number {
                      font-weight: 700;
                  }
                  .weight-english {
                      font-weight: bold;
                  }
                  h1 {
                      font-weight: 400;
                  }
              </style>
          

          font-weight用来定义字体粗细,实际开发时通常使用数字表示粗细。
          nromal=400=不加粗,bold=700=加粗。

    • 字体样式

      • 语法格式

        <style>
                /* 在实际开发中通常不设置成斜体 */
                p {
                    font-style: italic;
                }
        </style>
        

        font-style用来定义字体样式,如斜体。
        normal——默认值,正常字体。
        italic——斜体样式。

    • 字体复合属性

      • 语法格式

        <style>
                /* 将p标签内的文字变倾斜、加粗、字体20px、宋体 */
                p {
                    /* font-style: italic;
                    font-weight: 700;
                    font-size: 20px;
                    font-family: "宋体"; */
                    /* 使用复合属性 */
                    /* font: font-style font-weight font-size/line height font-family; */
                    font: italic 700 20px "宋体"
                }
        </style>
        

        字体属性可以按照上述代码将文字样式综合书写,但是有两点需要注意。
        使用复合属性时,必须按照代码中的顺序书写,不能更换顺序,并且属性之间以空格分隔
        不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则复合属性不起作用。

    • 总结

属性含义注意
font-size字体大小设置时记得加px单位
font-family字体系列根据需求选择
font-weight字体粗细加粗是700或bold,正常是400或normal
font-style字体样式italic是倾斜,但通常设置为normal
font字体属性连写连写有顺序;font-size和font-family必须写
  • 文本属性
    • 文本颜色

      • 语法格式

        <style>
                p {
                    color: red;
                    
                    color: rgb(255, 0, 0); 
                }
                h1 {
                    color: #ff0000;
                }
        </style>
        

        color属性用于定义文本的颜色,颜色有三种表示方式,分别为预定义的颜色值十六进制RGB代码。如红色对应red、#FF0000和rgb(255,0,0)。

    • 文本对齐

      • 语法格式

        <style>
                h1 {
                    text-align: center;
                }
                p {
                    text-align: right;
                }
        </style>
        

        text-align属性用于设置文本内容的水平对齐方式,分别为左对齐left、右对齐right和居中对齐center

    • 文本装饰

      • 语法格式

        <style>
                h1 {
                    text-decoration: underline;
                }
                a {
                    text-decoration: none;
                }
        </style>
        

        text-decoration用于定义文本的装饰,如下划线underline、上划线overline和删除线line-through,当属性值为none时没有装饰线。

    • 文本缩进

      • 语法格式

        <style>
                p {
                    /* 文本的第一行首行缩进 */
                    text-indent: 30px; 
                    /* 也可以使用em单位,1个em相当于当前文字1个文字大小的距离 */
                    text-indent: 2em;
                }
        </style>
        

        text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。
        可以利用pxem两个单位进行缩进,px是精确到像素,em是当前文本1个文字的大小。

    • 行间距

      • 语法格式

        <style>
                p {
                    line-height: 20px;
                }
        </style>
        

        line-height用来定义行间的距离,即行间距。行间距由上间距文本高度下间距组成。

    • 总结

属性含义注意
color文本颜色通常使用十六进制表示
text-align文本对齐根据需求选择
text-indent文本缩进通常使用em单位,缩进2个字的距离——2em
text-decoration文本修饰主要使用下划线underline
line-height行间距根据需求选择
  • CSS的引入方式
    • 行内样式表(行内式)

      • 语法格式

        <p style="color: red; font-size: "20px">马里奥</p>
        

        行内样式表就是在标签内部利用style属性定义CSS样式,适用于简单样式的修改。

    • 内部样式表(嵌入式)

      • 语法格式

        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>画盒子</title>
            <style>
                .box {
                    width: 200px;
                    height: 100px;
                    font-size: 50px;
                }
        
                .red {
                    /* 背景颜色 */
                    background-color: red;
                }
            </style>
        </head>
        

        内部样式表就是将CSS样式抽取出来,统一写到<style></style>标签中,并将<style></style>标签放置在<head></head>标签内部。

    • 外部样式表(链接式)

      • 语法格式

        <link rel="stylesheet" href="style.css">
        

        外部样式表的核心就是样所有CSS样式写到一个CSS文件中,之后利用<link>标签将CSS文件导入到HTML页面中使用。

    • 总结

样式表优点缺点控制范围
行内样式表书写方便结构和样式混写,只适合简单修改控制一个标签
内部样式表部分结构和样式分离仍然将样式和结构放在一个文件中控制一个页面
外部样式表结构和样式分离需要单独导入控制多个页面
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页