CSS技术

CSS技术的引入是为了使得HTML能够更好地适应页面的美工设计。

全名：Cascading Style Sheets -> 层叠样式表CSS文件是一种文本文件，可以用任何一种文本编辑器对其进行编辑，CSS不需要编译，是一种可以直接由浏览器执行的一种标记性语言，或者说是一种浏览器解释型语言。

CSS样式

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

• 1

样式是 CSS 最小语法单元，每个样式包含两部分内容：选择器和声明（规则），如图 1 所示

常用的选择器
1.元素选择器
语法 : 标签名{}

作用 : 选中对应标签中的内容

例:p{} , div{} , span{} , ol{} , ul{} ......

2.类选择器(class选择器)
语法 : .class属性值{}

作用 : 选中对应class属性值的元素

例子 : <p class="A">段落1</p>

          <p class="B">段落1</p>

          <p class="C">段落1</p>

          .A{} , .B{} , .C{} ......

注意:class里面的属性值不能以数字开头,如果以符号开头,只能是'_'或者'-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值

3.id选择器
语法 : #id属性值{}

作用 : 选中对应id属性值的元素

例子 : <p id="A">段落1</p>

          <p id="B">段落1</p>

          <p id="C">段落1</p>

          #A{} , #B{} , #C{} ......

注意 : id的属性值只能给1个,可以重复利用,不能以数字开头
4.组合选择器

 

 

语法 : 选择器1,选择器2,选择器3...{}

作用 : 同时选中对应选择器的元素

 三种引入方式 

1.行内样式
行内样式就是直接把css样式添加在HTML标签中,作为style样式的属性值

<!-- 行内/内嵌/嵌入式/内联样式 -->
  <!-- 背景颜色  background-color:颜色值; -->
  <!-- 背景颜色  background-color:颜色值可以是单词,比如红色  red; -->
  <!-- 背景颜色  background-color:颜色值可以rgb(数字,数字,数字),r  red  红色 g  green绿色 b  blue 蓝色 取值范围是0-255; -->
  <!-- 背景颜色  background-color:颜色值可以是16进制表示  #某某  #fff白色  #000黑色; -->
  <p style="width: 200px; height:100px;background-color: red;">文本内容</p>
  <p style="width: 200px; height:100px;background-color: blue;">文本内容</p>
  <p style="width: 200px; height:100px;background-color: rgb(221, 255, 0);">文本内容</p>
  <p style="width: 200px; height:100px;background-color: #aa0;">文本内容</p>

 2.内部样式(内嵌式)
内嵌式是在HTML中创建一个style标签，把css样式写入style标签内，style标签可以写在HTML中的任何位置，但是我们通常写在head标签里面。

<!-- 书写内部样式的时候,按照书写代码需要把style放在头部的原因是因为希望浏览器加载的时候,先加载css备用,然后到加载html的时候,直接就把相关的css样式给显示出来(类似人做事儿的时候,先准备再做,效率会提高) -->
  <!-- 第2步:找装修公司 style-->
 
    <style type="text/css">
 
    /* 第3步:书写装修的过程 */
 
    p{
      width: 200px;
      height: 200px;
      background-color: red;
    }
 
    </style>
 
    <!-- 第1步:盖房子 -->
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>

3.外部样式
3.1外链式
外链式是把css样式写入.css文件内，然后通过link标签链接。