首页 技术 正文

html–前端css样式初识

技术 2022年11月15日
0 收藏 958 点赞 3,345 浏览 6012 个字

一、CSS概述

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

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

二、css样式的引入方法

1、行内式

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

 <!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>Document</title>
 </head>
 <body>
     <a style="background-color: aqua;color: brown;">我正在学习一门python语言</a> </body>
 </html>

图示：

html–前端css样式初识

2、嵌入式

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

<head>

<style type=”text/css”>

…此处写CSS样式

</style>

</head>

 <!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>Document</title>
     <style>
         a{
             background-color: red;
             font-size: 20px;
         }
     </style>
 </head>
 <body>
     <a>我正在学习一门python语言</a> </body>
 </html>

图示：

html–前端css样式初识

3、导入式

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

<style type=”text/css”>

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

</style>

 <!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>Document</title>
     <style>
          @import "index.css"; <!--注意引入css的文件路径 -->
     </style>
 </head>
 <body>
     <a>我正在学习一门python语言</a> </body>
 </html>

图示：

html–前端css样式初识

4、链接式

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

 <!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>Document</title>
     <link href="index.css" rel="external nofollow"  rel="stylesheet" type="text/css">
 </head>
 <body>
     <a>我正在学习一门python语言</a> </body>
 </html>

图示：

html–前端css样式初识

注意事项：

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

三、css选择器

1、基础选择器

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

 <!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>Document</title>
     <style>
         *{
             font-size: 40px;
             background-color: salmon;
         }
     </style>
 </head>
 <body>
     <a>我正在学习一门python语言</a> </body>
 </html>

图示：

html–前端css样式初识

2、标签选择器

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

 <!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>Document</title>
     <style>
         a{
             font-size: 40px;
             background-color: salmon;
         }
     </style>
 </head>
 <body>
     <a>我正在学习一门python语言</a> </body>
 </html>

图示：

html–前端css样式初识

3、id选择器和class选择器

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

 <!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>Document</title>
     <style>
         #a1{
             font-size: 40px;
             background-color:royalblue;
         }
         .mydiv{
             font-size: 20px;         }
     </style>
 </head>
 <body>
     <a id='a1'>我正在学习一门python语言</a>
     <div class='mydiv'>yusheng_liang</div> </body>
 </html>

图示：

html–前端css样式初识

4、多元素选择器

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

 <!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>Document</title>
     <style>
         a,p{
             font-size: 40px;
             background-color:royalblue;
         }     </style>
 </head>
 <body>
     <a id='a1'>我正在学习一门python语言</a>
     <p class='mydiv'>yusheng_liang</p> </body>
 </html>

图示：

html–前端css样式初识

5、后代选择器

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

 <!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>Document</title>
     <style>
         div p{
             font-size: 40px;
             background-color: seagreen;
         }     </style>
 </head>
 <body>
     <div>
         <p>段落 1。 在 div 中。</p>
         <p>段落 2。 在 div 中。</p>
     </div>     <p>段落 3。不在 div 中。</p>
     <p>段落 4。不在 div 中。</p>
 </body>
 </html>

图示：

html–前端css样式初识

6、子元素选择器

　　与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。以下实例选择了<div>元素中所有直接子元素 <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>Document</title>
     <style>
         div>p{
             font-size: 40px;
             background-color: seagreen;
         }     </style>
 </head>
 <body>
     <h1>Welcome to My Homepage</h1>
     <div>
         <h2>My name is Donald</h2>
         <p>I live in Duckburg.</p>
     </div>     <div>
         <span>
             <p>I will not be styled.</p>
         </span>
     </div>     <p>My best friend is Mickey.</p>
 </body>
 </html>

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

html–前端css样式初识

7、相邻元素选择器

　　相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。以下实例选取了所有位于 <div> 元素后的第一个 <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>Document</title>
     <style>
         div+p{
             font-size: 40px;
             background-color:blueviolet
         }     </style>
 </head>
 <body>
     <h1>Welcome to My Homepage</h1>
     <div>
         <h2>My name is Donald</h2>
         <p>I live in Duckburg.</p>
     </div>     <div>
         <span>
             <p>I will not be styled.</p>
         </span>
     </div>     <p>My best friend is Mickey.</p>
 </body>
 </html>

图示：

html–前端css样式初识

注意嵌套规则：

  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代码; }

 <!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>Document</title>
     <style>
         a:link{
         color: red;
     }
     a:visited {
         color: blue;
     }
     a:hover {
         color: green;
     }
     a:active {
         color: yellow;
     }
     </style>
 </head>
 <body>
     <a href="01-hello-world.html" rel="external nofollow" >hello-world</a>
 </body>
 </html>
点赞 958

贡献者

上一篇： Oracle分析函数FIRST_VALUE、LAST_VALUE
下一篇： 在 .NET Core Logging中使用 Trace和TraceSource
相关推荐
python开发_常用的python模块及安装方法
python开发_常用的python模块及安装方法
adodb：我们领导推荐的数据库连接组件bsddb3：BerkeleyDB的连接组件Cheetah-1.0：我比较喜欢这个版本的cheeta…
技术
日期：2022-11-24 点赞：878 阅读：8,984
Educational Codeforces Round 11 C. Hard Process 二分
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接：http://www.codeforces.com/contest/660/problem/CDes…
技术
日期：2022-11-24 点赞：807 阅读：5,501
下载Ubuntn 17.04 内核源代码
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
技术
日期：2022-11-24 点赞：569 阅读：6,345
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
技术
日期：2022-11-24 点赞：733 阅读：6,128
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式，并且由于涉及到要把拍到的照片显…
技术
日期：2022-11-24 点赞：512 阅读：7,763
Struts的使用
Struts的使用
一、Struts2的获取　　Struts的官方网站为：http://struts.apache.org/　　下载完Struts2的jar包,…
技术
日期：2022-11-24 点赞：671 阅读：4,839
Lomu

贡献者

这家伙很懒，只想把你留下。

文章
60
收藏
0
人气
191,503
粉丝
进主页
文章展示
  • [ 技术 ] python开发_常用的python模块及安装方法
  • [ 技术 ] Educational Codeforces Round 11 C. Hard Process 二分
  • [ 技术 ] 下载Ubuntn 17.04 内核源代码
  • [ 技术 ] 可用Active Desktop Calendar V7.86 注册码序列号
  • [ 技术 ] Android调用系统相机、自定义相机、处理大图片
  • [ 技术 ] Struts的使用
    • 个人收藏笔记记录
    我的笔记
    首页 首页 菜单 首页 首页