pt18CSS

CSS 基础使用

CSS全称为： Cascading Style Sheets ，意为层叠样式表，与HTML相辅相成，实现网页的排版布局与样式美化

CSS使用方式

行内样式/内联样式

使用简单，但不推荐，大面积使用，很累

借助于style标签属性，为当前的元素添加样式声明，声明由CSS属性和值组成

<标签名 style="样式声明">
eg：     
<h1 style="background-color: red;color: green">  hello world </h1>

常用CSS属性（其他属性，见文章末尾）

设置文本颜色 color:red;
设置背景颜色 background-color:green;
设置字体大小 font-size:32px;

外链样式表 link

创建外部样式表文件后缀使用.css，在HTML文件中使用标签引入外部样式表，样式表文件中借助选择器匹配元素应用样式

使用方式举例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS使用方式</title>
  <!-- 3、链接外部样式表文件 写项目时使用，更灵活  -->
  <!-- <link rel="stylesheet" href="demo.css" target="_blank" rel="external nofollow" > -->

  <!-- 2、在HTML标签内部嵌入一段CSS代码 -->
  <style>
    /* CSS代码的注释样式 */
    h1{
      background-color: red;
      color: green;
    }
  </style>
</head>
<body>
  <!-- 1、行内样式不推荐，只能本行内使用-->
<!-- <h1 style="background-color: red;color: green">  hello world  </h1> -->
  <h1>hello world</h1>
  <h1>俺也一样</h1>
</body>
</html>

demo.css文件内容

/* 样式表  demo.css文件内容 */
h1{
  background-color: red;
  color: green;
}

样式表特征

样式表的优先级

优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色)，在不同地方多次进行设置，最终选用哪一种样式？此时哪一种样式表的优先级高选用哪一种。

行内样式的优先级最高
文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
浏览器默认样式和继承样式优先级较低

<head>
  <style>
    body{
      /* 默认字体大小16px */
      font-size: 30px;
    }
    h1{
      font-size: 32px;
      background-color: aqua;
    }
  </style>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
  <!-- 当CSS的书写方式一致 后执行的样式代码会覆盖先执行的样式代码 行内样式的优先级最高  浏览器默认样式和继承自祖先元素的样式优先级最低 -->
  <h1 style="text-align: center;background-color: chartreuse;">
    hello world
  </h1>

当CSS的书写方式一致后执行的样式代码会覆盖先执行的样式代码行内样式的优先级最高浏览器默认样式和继承自祖先元素的样式优先级最低

CSS 选择器

作用：匹配文档中的某些元素为其应用样式

标签选择器

根据标签名匹配文档中所有该元素，如上面使用

标签名{
  属性:值;
}

id选择器

根据元素的 id 属性值匹配文档中惟一的元素，id具有唯一性，不能重复使用，大的布局上使用，一般尽可能不用

  #id属性值{
  
  }

注意 :
id属性值自定义,可以由数字，字母，下划线，- 组成，不能以数字开头;
尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示

class选择器

类选择器：根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用
语法 :

.class属性值 {
 	
}

特殊用法 :

  1. 类选择器与其他选择器结合使用
     注意标签与类选择器结合时,标签在前,类选择器在后
       	例 : a.c1{ }
  2. class属性值可以写多个,共同应用类选择器的样式
     例 : 
        	.c1{  }
        	.c2{  }		
        	
<p class="c1 c2"></p>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>选择器-id/class</title>
  <style>
<!--  创建id选择器 -->          
    #title{
      color: red;
    }
<!--  创建class选择器 -->    
    .blue{
      color: blue;
    }

    .center{
      text-align: center;
    }
<!--  与其他选择器结合使用 作用到 全场卖五块处的li-->   
    li.blue{
      font-size: 30px;
      font-weight: bold;
    }
<!--  id=title的h1 -->   
    h1#title{}
<!--  同时具有两个class -->   
    .blue.center{}
  </style>
</head>
<body>
  <!-- 
    id     唯一   页面中id值不能重复
    class  值可以重复使用 一个元素可以有多个class值 
   -->
  <h1 id="title">选择器的使用</h1>
  <p class="blue">
    <!-- lorem*2 -->
    Lorem ipsum dolor sit amet consectetur ....
  </p>
  <!-- ul>li*4 -->
  <ul>
    <li class="center">两块钱你买不了吃亏</li>
    <li class="center">两块钱你买不了上当</li>
    <li class="center">两块钱你啥也买不了</li>
<!-- class属性可以取多个值 多个值之间用空格分隔 不区分先后顺序 只要样式不冲突都会生效 -->
    <li class="blue center">全场卖五块！</li>
  </ul>
</body> 
</html>

群组选择器

为一组元素统一设置样式
语法 :

selector1,selector2,selector3{	         
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>群组选择器</title>

  <style>
    div{
      /* width: 200px;
      height: 200px; */
      background-color: aqua;
    }
    h1{
      /* width: 200px;
      height: 200px; */
      background-color: brown;
    }
/* 群组选择器 将多个选择器通过,分隔后 形成一个群组 可以对群组中包含的元素设置统一的样式 */
/* 1.样式设置完毕后 将重复的样式放在同一个群组中 减少样式代码的重复
2.在项目开始前 清除页面中常用元素的默认样式,浏览器body里点      margin,padding,border,outline */
    div,h1{
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <!-- div#d1  + tab  -->
  <div id="d1"></div>
  <!-- h1#title.blue.center + tab-->
  <h1 id="title" class="blue center"></h1>
</body>
</html>

后代选择器

匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)，

eg：匹配selector1中所有满足selector2的后代元素

selector1 selector2{
}

子代选择器

匹配满足选择器的所有直接子元素

selector1>selector2{
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>后代、子代选择器</title>
  <style>
    .nav>li{
      background-color: #4f8dfe;
      color: white;
    }
    .section>li{
      background-color: #292d32;
      color: #999;
    }
/* 在项目中 一个页面中可能会有很多相同的页面结构 相同的页面结构要设置不同的样式时  
      可以对外层的祖先元素或者父元素添加特殊的属性如id/class
      然后通过后代选择器/子代选择器查找内部的子元素设置样式 */
    /* 子代选择器 查找直接包含的子元素 */
    /* 后代选择器 查找后代元素 包括直接包含的元素和间接包含的元素 范围较大 */
  </style>
</head>
<body>
  <!-- ul>li -->
  <ul class="nav">
    <li>首页</li>
    <li>免费课</li>
    <li>直播课</li>
  </ul>

  <ul class="section">
    <li>前端/后端开发</li>
    <li>大数据/云计算</li>
    <li>人工智能</li>
  </ul>
</body>
</html>

伪类选择器

为元素的不同状态分别设置样式,必须与基础选择器结合使用

:focus 焦点状态(文本框被编辑时就称为获取焦点)

使用 :

a:link{
}
a:visited{
}
.c1:hover{ }

注意 :

超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写

:link
:visited
:hover
:active

超链接常用设置 :

a{
	/*统一设置超链接默认样式(不分状态)*/
}
a:hover{
	/*鼠标滑过时改样式*/
}

伪类选择器hover

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>伪类选择器</title>
  <style>

    span{
      color: blue;
      /* 添加下划线 */
      text-decoration: underline;
      /* 鼠标指针变成小手 */
      cursor: pointer;
    }
    span:active{
      color: red;
    }

    div{
      width: 200px;
      height: 200px;
      background-color: red;
      /* 过渡  在样式发生变化时 不会马上改变 而是在规定的时间内完成变化 */
      /*  要发生变化的样式属性,所有all     过渡时间  时长，快慢，先快后慢... */
      /* transition: width 1s,background 1s; */
      transition: all 1s;
    }
    div:hover{
      width: 500px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <!-- <a href="" target="_blank" rel="external nofollow" >百度一下</a> -->
  <span>百度一下</span>
  <div></div>
</body>
</html>

选择器的优先级

使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高

选择器	权重
标签选择器	1
(伪)类选择器	10
id选择器	100
行内样式	1000

复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和，群组选择器权重以每个选择器单独的权重为准，不进行相加计算
例 :

/*群组选择器之间互相独立，不影响优先级*/
body,h1,p{ /*标签选择器权重为 1 */
 color:red;
}
.c1 a{ /*当前组合选择器权重为 10+1  */
 color:green;
}
#d1>.c2{ /*当前组合选择器权重为 100+10 */
 color:blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>选择器的优先级</title>
  <style>
    h1{
      color: blue;
    }
    #title{
      color: green;
    }
    .red{
      color: red;
    }
    /* 后代、子代、伪类选择器使用时 多个选择器的权重累加 
    伪类选择器使用时建议将原本生效的选择器拿来后再添加伪类 */
    #title:hover{
      color: pink;
    }

    /* 群组选择器中每个选择器的权重独立计算,不会累加 */
    #login,.main,h1,h2,h3,p{
      color: orange;
    }
  </style>
</head>
<body>
  <!-- 当样式发生冲突时 会先判断选择器的优先级 如果选择器优先级一致 再按照代码的执行顺序判断 -->
  <!-- h1#title.red -->
  <!-- 尽可能通过不同的选择器对页面元素进行查找 为页面元素添加不同的字体颜色 color: -->
  <h1 id="title" class="red">
    测试选择器的优先级
  </h1>
</body>
</html>

标签分类

块元素

独占一行，不与元素共行；可以手动设置宽高，默认宽度与与父元素保持一致
例 : body div h1~h6 p ul ol li form, table(默认尺寸由内容决定)

行内元素

可以与其他元素共行显示；不能手动设置宽高，尺寸由内容决定
例 : span label b strong i s u sub sup a

行内块元素

可以与其他元素共行显示,又能手动调整宽高
例 : img input button (表单控件)

嵌套原则

块元素中可以嵌套任意类型的元素，p元素除外,段落标签只能嵌套行内元素，不能嵌套块元素
行内元素中最好只嵌套行内或行内块元素

display设置元素显示方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>标签分类</title>
  <style>
    /* 
      display 设置元素显示方式,覆盖默认显示方式
      
      none  隐藏元素，不加载

      block 块元素 调整宽高，独占一行，默认宽度和父元素一致

      inline 行内元素 能和其他元素在同一行显示 不能调整宽高，大小由内容决定

      inline-block 行内块 能和其他元素在同一行显示 也能调整宽高 
                   设置行内块后 当前元素会被当做一行中的内容对待 在元素后做的换行会被替换成一个空格
    */
    div{
      width: 200px;
      height: 200px;
      background-color: red;
      /* 设置成行内块 */
      display: inline-block;
    }
    span{
      width: 200px;
      height: 200px;
      background-color: blue;
      /* 将span的显示方式设置为块元素 */
      /* display: block; */
      /* display: inline-block; */
      /* 隐藏 */
      display: none;
    }
  </style>
</head>
<body>
  <div></div>
  <span></span>
  <a href="">hello world</a>

  <!-- 嵌套原则  不建议这样使用<a href="https://www.baidu.com" target="_blank" rel="external nofollow" >
    <h1>百度一下</h1>
  </a> -->

  <h1>
    <a href="https://www.baidu.com">百度一下</a>
  </h1>


  <!--嵌套原则  不建议这样使用 <p>
    <h1></h1>
  </p> -->


</body>
</html>html

尺寸单位

px 像素单位
% 百分比，参照父元素对应属性的值进行计算
em 字体尺寸单位，参照父元素（body？）的字体大小计算，默认1em=16px
rem字体尺寸单位，参照根元素（html？）的字体大小计算，默认1rem=16px

颜色单位

英文单词：red，green，blue
rgb(r,g,b) 使用三原色表示，每种颜色取值0~255
rgba(r,g,b,alpha) 三原色每种取值0_{255，alpha取值0（透明）}1（不透明）
十六进制表示：以#为前缀，分为长十六进制和短十六进制。
- 长十六进制：每两位为一组，代表一种三原色；每位的取值范围0_9，af
  例：red rgb(255,0,0) #ff0000
- 短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十六进制解析
  例：#000 #fff #f00

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>尺寸单位</title>
  <style>
    html{
      height: 100%;
    }
    body{
      /* 清除body的默认属性 */
      /* 在chrome中 会为body添加margin=8px的默认外边距 让内容不会直接贴在浏览器边缘 */
      /* 如果取值为0 不加单位 一般不对height做调整，默认无高度属性*/
      margin: 0;
      /* width: 100%; */
      height: 100%;
      font-size: 20px;
    }
    div{
      width: 50%;
      height: 50%;
      /* 
        十六进制     十进制
         f           15
         10          16
         1f        16+15
         2f        16*2+15
         ff        16*15+15       
       */
      /* background-color: rgb(0,0,0) */
       /* #f00-->#ff0000 */
      background-color:#666;
      /* 父元素body字体大小*1.5 */
      font-size: 1.5em;
    }
    p{
      width: 40em;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam et, repellendus facilis enim, hic libero ea ad magnam inventore cum deleniti ipsam adipisci unde, provident id expedita. Voluptatum, expedita sapiente.
  </div>
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio, inventore voluptate consectetur aliquam accusantium in itaque quisquam voluptatum a, veritatis eaque, voluptatem cum alias. Cumque adipisci eos qui placeat facilis?
  </p>
  <div>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam sed dolorum, aperiam sapiente enim dicta magnam, dolor sint porro, earum aspernatur corrupti. Corporis dolor eos in ducimus commodi non officiis?
  </div>
</body>
</html>

常用CSS样式参考

功能	属性名	取值
宽度	width	尺寸单位，行内元素无效
高度	height	尺寸单位，行内元素无效
背景颜色	background-color	颜色单位
背景图片	background-image	url(“路径”)
字体大小	font-size	尺寸单位
字体粗细程度	font-weight	normal/bold(加粗)
字体样式	font-style	normal/italic(倾斜)
字体名称	font-family	字体名称，如Arial,“黑体”
文本颜色	color	颜色单位
文本装饰线	text-decoration	none/underline(下划线)
文本内容的水平对齐方式	text-align	left(默认值)/center/right/justify(两端对齐)
行高(文本内容垂直对齐)	line-height	尺寸单位,line-height = height 设置一行文本在元素中垂直居中,line-height > height 文本下移显示,line-height < height 文本靠上显示
边框	border	三个值，分别为宽度/样式/颜色，用空格隔开，如 1px solid red(1像素实线边框)
单边框	border-top/right/bottom/left	同上
圆角边框	border-radius	像素值或百分比，50%为圆形，最多取4个值，按照顺序分别表示左上、右上、右下、左下，如果没有值时和对角一致
内边距	padding	常用像素值，调整元素内容与边框之间的距离，最多取4个值，按照顺序分别表示上右下左四个方向的距离，最小值为0
单方向内边距	padding-top/right/bottom/left	取一个值
外边距	margin	调整元素与元素之间的距离，最多取4个值，按照顺序分别表示上右下左四个方向的距离
单方向外边距	margin-top/right/bottom/left	取一个值
修改鼠标指针样式	cursor	pointer光标呈现为指示链接的指针
过渡效果	transition	取多个值，包含设置过渡效果的 CSS 属性的名称，完成过渡效果需要多少秒或毫秒，速度效果的速度曲线等，如width 2s linear

淘先锋技术网