HTML5+CSS3 前端入门教程 --- 从 0 开始通过一个商城实例手把手教你学习 PC 端和移动端页面开发第 3 章初识 CSS

 关注
发布于: 2020 年 07 月 29 日
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第3章初识CSS
本教程案例在线演示﻿
有路网PC端
有路网移动端
﻿
免费配套视频教程免费配套视频教程
教程配套源码资源﻿
教程配套源码资源
﻿
考虑对人的描述方式
﻿
人 {
   身高:175cm;   
    体重:70kg;   
    肤色:黄色
}
﻿
CSS基本语法结构﻿
选择器 {
 	声明1;
    声明2;
﻿
    }
﻿
﻿
h1 {
	font-size:12px;
	color:#F00;
}
﻿
﻿
style标签
<style type="text/css">
h1 {
	font-size:12px;
	color:#F00;
}
</style>
﻿
标签选择器﻿
HTML标签作为标签选择器的名称
﻿
<h1>…<h6>、<p>、<img/>
﻿
p { font-size:16px;}
﻿
﻿
类选择器﻿
<标签名 class= "类名称">标签内容</标签名>
﻿
.类名称 { font-size:16px;}
﻿
ID选择器﻿
<标签名 id= "id名称">标签内容</标签名>
﻿
#id名称 { font-size:16px;}
﻿
﻿
标签选择器直接应用于HTML标签
﻿
类选择器可在页面中多次使用
﻿
ID选择器在同一个页面中只能使用一次
﻿
制作《浣溪沙》使用标签选择器设置标题字体大小为20px
﻿
页面中所有段落中的文本字体大小为16px
﻿
使用类选择器设置正文和译文内容字体颜色为绿色
﻿
使用ID选择器设置译文标题颜色为蓝色
﻿
﻿
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>《浣溪沙》</title>
  <style type="text/css">
    h1 {
      font-size: 20px;
    }
﻿
    p {
      font-size: 16px;
    }
﻿
    .poem {
      color: green;
    }
﻿
    #title {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>浣溪沙</h1>
  <hr />
  <p class="poem">一曲新词酒一杯，<br />
    去年天气旧亭台。<br />
    夕阳西下几时回？<br />
    无可奈何花落去，<br />
    似曾相识燕归来。<br />
    小园香径独徘徊。
  </p>
  <p id="title">译文</p>
  <p class="poem">听一支新曲喝一杯美酒，还是去年的天气旧日的亭台，西落的夕阳何时再回来？
    那花儿落去我也无可奈何，那归来的燕子似曾相识，在小园的花径上独自徘徊。</p>
</body>
</html>
CSS复合选择器后代选择器
﻿
交集选择器
﻿
并集选择器
﻿
后代选择器在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明.
﻿
外层的标签写在前面，内层的标签写在后面，之间用空格分隔.
﻿
标签嵌套时，内层的标签成为外层标签的后代.
﻿
h3 strong{color:blue; font-size:36px;}
交集选择器由两个选择器直接连接构成，选中二者各自元素范围的交集.
﻿
第一个必须是标签选择器，第二个必须是类选择器或者ID选择器.
﻿
选择器之间不能有空格，必须连续书写
﻿
p.txt{color:blue; line-height:28px;}
﻿
并集选择器多个选择器通过逗号连接而成.
﻿
利用并集选择器同时声明风格相同样式.
h3,.first,.second,#end{
        font-size:16px; 
        color:green; 
        font-weight:normal;
}
﻿
制作《花千骨大结局》
﻿
<!DOCTYPE html>
<html lang="en">
﻿
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    p strong,
    h1 strong {
      color: red;
    }
  </style>
</head>
﻿
<body>
  <h1><strong>花千骨</strong>大结局</h1>
  <p>人间帝王轩辕郎、无所不知所不能东方彧卿（其实他就是超脱六界之外的异朽君）、妖魔两界圣君杀阡陌那时都是爱花千骨的，都希望白子画能够善待花千骨。</p>
  <p>白子画的善待是八十一根消魂钉，普通仙一根消魂钉就死去活来。花千骨受了17根，又被白子画用断念剑看了近百剑，<strong>花千骨心里那个痛苦不言而喻</strong>。而后，花千骨扔到地牢。白子画替她承受了剩下的消魂钉。
    <strong>白子画</strong>
    在霓漫天的告知下，白子画的师兄摩严得知花千骨居然悖逆天理爱上白子画，用绝情水泼到花千骨的喉咙里，脸上，于是花千骨又瞎又哑又毁容，被发配到了几乎不可能走出来的蛮荒之地。</p>
  <strong>花千骨又瞎又哑又毁容</strong>
</body>
</html>
HTML中引入CSS样式行内样式
内部样式表
外部样式表
﻿
行内样式﻿
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
﻿
内部样式表
CSS代码写在<head>的<style>标签中
优点
方便在同页面中修改样式
﻿
缺点
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
﻿
外部样式表﻿
CSS代码保存在扩展名为.css的样式表中.
﻿
HTML文件引用扩展名为.css的样式表，有两种方式
链接式
导入式
链接外部样式表
﻿
<head>
  ……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>
导入外部样式表﻿
<head>
……
<style type="text/css"></style>
</head>
CSS继承特性
<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
    body{color:red;}    
</style>
</head>
    <body>
        <p>
            父级P
            <strong>子级strong</strong>
            父级P
        </p>
        <ul>    
            <li>子级li1</li>
            <li>子级li2</li>
        </ul>
    </body>
</html>
﻿
﻿
﻿
子标签可以继承父标签的样式风格
﻿
子标签可以覆写父标签的样式，但不会影响父标签的样式风格
﻿
<h1>勇气</h1>
<p class="first">三年级时，我还是一个<strong>胆小如鼠</strong>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。
</p>
<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<strong>简单</strong>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。
</p>
﻿
p{color:red;} 
.first strong{color: blue} 
﻿
﻿
CSS的优先级﻿
ID选择器>类选择器>标签选择器
<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
p{color:red;}        
.first{color:green;}    
</style>
</head>
<body>
<p class="first" id="pid">三年级时，我还是一个<strong>胆小如鼠</strong>的小女孩。</p></body>
</html>
p和.first都匹配到了p这个标签上，green是正确的颜色
﻿
﻿
在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用
﻿
<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
    p{color:red;} 
    p{color:green;}
</style>
</head>
<body>
    <p class="first" id="pid">三年级时，我还是一个<strong>胆小如鼠</strong>的小女孩。</p>
</body>
</html>
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
    p{color:red;}        
    p{color:blue;}    
</style>
</head>
<body> 
    <p class="first" id="pid" style="color:green">三年级时，我还是一个<strong>胆小如鼠</strong>的小女孩。</p> 
</body>
</html>
﻿
有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style type="text/css">        
    p{color:red!important;}         
    .first{color:blue;}   
</style>
</head>
<body> 
      <p class="first" id="pid" style="color:green">三年级时，我还是一个<strong>胆小如鼠</strong>的小女孩。</p>
</body>
</html>
﻿
﻿
﻿