zoukankan      html  css  js  c++  java

  • html--前端css样式初识

    一、CSS概述

    css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化，CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。

    • CSS 指层叠样式表 (Cascading Style Sheets)
    • 样式定义如何显示 HTML 元素
    • 样式通常存储在样式表中
    • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
    • 外部样式表可以极大提高工作效率
    • 外部样式表通常存储在 CSS 文件中
    • 多个样式定义可层叠为一

    二、css样式的引入方法

    1、行内式

    行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <a style="background-color: aqua;color: brown;">我正在学习一门python语言</a>
11     
12 </body>
13 </html>

    图示：

    2、嵌入式

     嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

            <head>

            <style type="text/css">

                   ...此处写CSS样式

           </style>

           </head>

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         a{
10             background-color: red;
11             font-size: 20px;
12         }
13     </style>
14 </head>
15 <body>
16     <a>我正在学习一门python语言</a>
17     
18 </body>
19 </html>

    图示：

    3、导入式

     将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

              <style type="text/css">

                        @import"index.css"; 此处要注意.css文件的路径

             </style>

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9          @import "index.css"; <!--注意引入css的文件路径 -->
10     </style>
11 </head>
12 <body>
13     <a>我正在学习一门python语言</a>
14     
15 </body>
16 </html>

    图示：

    4、链接式

     也是将一个.css文件引入到HTML文件中    <link href="index.css" rel="stylesheet" type="text/css"/>

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <link href="index.css" rel="stylesheet" type="text/css">
 9 </head>
10 <body>
11     <a>我正在学习一门python语言</a>
12     
13 </body>
14 </html>

    图示：

    注意事项：

    　　导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

    三、css选择器

    1、基础选择器

     　　匹配任何元素用*，包括body元素

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         *{
10             font-size: 40px;
11             background-color: salmon;
12         }
13     </style>
14 </head>
15 <body>
16     <a>我正在学习一门python语言</a>
17     
18 </body>
19 </html>

    图示：

    2、标签选择器

    　　匹配所有P标签，格式如下:a{}

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         a{
10             font-size: 40px;
11             background-color: salmon;
12         }
13     </style>
14 </head>
15 <body>
16     <a>我正在学习一门python语言</a>
17     
18 </body>
19 </html>

    图示：

    3、id选择器和class选择器

    　　css样式id调用里用： #id名字调用； class调用用：.类名{}

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         #a1{
10             font-size: 40px;
11             background-color:royalblue;
12         }
13         .mydiv{
14             font-size: 20px;
15 
16         }
17     </style>
18 </head>
19 <body>
20     <a id='a1'>我正在学习一门python语言</a>
21     <div class='mydiv'>yusheng_liang</div>
22     
23 </body>
24 </html>

    图示：

    4、多元素选择器

    　　同时匹配所有E元素或F元素，E和F之间用逗号分隔 

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         a,p{
10             font-size: 40px;
11             background-color:royalblue;
12         }
13 
14     </style>
15 </head>
16 <body>
17     <a id='a1'>我正在学习一门python语言</a>
18     <p class='mydiv'>yusheng_liang</p>
19     
20 </body>
21 </html>

    图示：

    5、后代选择器

    　　后代选择器匹配所有值得元素的后代元素。以下实例选取所有 <p> 元素插入到 <div> 元素中:

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         div p{
10             font-size: 40px;
11             background-color: seagreen;
12         }
13 
14     </style>
15 </head>
16 <body>
17     <div>
18         <p>段落 1。 在 div 中。</p>
19         <p>段落 2。 在 div 中。</p>
20     </div>
21     
22     <p>段落 3。不在 div 中。</p>
23     <p>段落 4。不在 div 中。</p>
24 </body>
25 </html>

    图示：

    6、子元素选择器

    　　与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。以下实例选择了<div>元素中所有直接子元素 <p> ：

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         div>p{
10             font-size: 40px;
11             background-color: seagreen;
12         }
13 
14     </style>
15 </head>
16 <body>
17     <h1>Welcome to My Homepage</h1>
18     <div>
19         <h2>My name is Donald</h2>
20         <p>I live in Duckburg.</p>
21     </div>
22     
23     <div>
24         <span>
25             <p>I will not be styled.</p>
26         </span>
27     </div>
28     
29     <p>My best friend is Mickey.</p>
30 </body>
31 </html>

    只改变了div下p子元素，效果图如下：

    7、相邻元素选择器

    　　相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         div+p{
10             font-size: 40px;
11             background-color:blueviolet
12         }
13 
14     </style>
15 </head>
16 <body>
17     <h1>Welcome to My Homepage</h1>
18     <div>
19         <h2>My name is Donald</h2>
20         <p>I live in Duckburg.</p>
21     </div>
22     
23     <div>
24         <span>
25             <p>I will not be styled.</p>
26         </span>
27     </div>
28     
29     <p>My best friend is Mickey.</p>
30 </body>
31 </html>

    图示：

    注意嵌套规则：

    1. 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
    2. 块级元素不能放在p里面。
    3. 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
    4. li内可以包含div
    5. 块级元素与块级元素并列、内联元素与内联元素并列。（错误的：<div><h2></h2><span></span></div>）

    8、伪类选择器：

    伪类选择器： 专用于控制链接的显示效果，伪类选择器：

    a:link（没有接触过的链接）,用于定义了链接的常规状态。

    a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

    a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

    a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

         伪类选择器 : 伪类指的是标签的不同状态:

                a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

    a:link {color: #FF0000} /* 未访问的链接 */

    a:visited {color: #00FF00} /* 已访问的链接 */

    a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

    a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         a:link{
10         color: red;
11     }
12     a:visited {
13         color: blue;
14     }
15     a:hover {
16         color: green;
17     }
18     a:active {
19         color: yellow;
20     }
21     </style>
22 </head>
23 <body>
24     <a href="01-hello-world.html">hello-world</a>
25 </body>
26 </html>
  • 相关阅读:
    python中的break 和continue的区别
    查询前几条数据
    python logging日志模块
    python unittest单元测试
    python的数据驱动
    SQL求出优秀、及格人数
    SQL查询去掉重复数据
    vue组件路由守卫钩子函数（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）
    前端开发，走浏览器缓存真的很烦，拒绝浏览器走缓存从meta标签做起！
    （转）前端开发-发布一个NPM包之最简单易懂流程
  • 原文地址：https://www.cnblogs.com/june-L/p/11854181.html
Copyright © 2011-2022 走看看