关于css:HTML5CSS3前端入门教程从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">
<!--
@import url("style.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>

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

本教程案例在线演示

收费配套视频教程

教程配套源码资源

CSS根本语法结构

style标签

标签选择器

类选择器

ID选择器

制作《浣溪沙》

CSS复合选择器

后辈选择器

交加选择器

并集选择器

制作《花千骨大结局》

HTML中引入CSS款式

行内款式

外部样式表

内部样式表

导入内部样式表

CSS继承个性

CSS的优先级

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

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

本教程案例在线演示

收费配套视频教程

教程配套源码资源

CSS根本语法结构

style标签

标签选择器

类选择器

ID选择器

制作《浣溪沙》

CSS复合选择器

后辈选择器

交加选择器

并集选择器

制作《花千骨大结局》

HTML中引入CSS款式

行内款式

外部样式表

内部样式表

导入内部样式表

CSS继承个性

CSS的优先级

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复