html--前端css样式初识
一、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>
图示：
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>
图示：
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>
图示：
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="stylesheet" type="text/css">
</head>
<body>
<a>我正在学习一门python语言</a> </body>
</html>
图示：
注意事项：
导入式会在整个网页装载完后再装载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>
图示：
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>
图示：
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>
图示：
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>
图示：
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>
图示：
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子元素，效果图如下：
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>
图示：
注意嵌套规则：
- 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
- 块级元素不能放在p里面。
- 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
- li内可以包含div
- 块级元素与块级元素并列、内联元素与内联元素并列。（错误的：<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">hello-world</a>
</body>
</html>
html--前端css样式初识的更多相关文章
- HTML前端——CSS样式
使用CSS样式的方式: HTML<!DOCTYPE> 声明标签 内链样式表<body style="background: green; margin: 0; paddin ...
- 前端-CSS样式
一.CSS介绍 CSS(Cascading Style Sheet),全称层叠样式,定义如何显示HTML内的元素,浏览器读取HTML文件时,读取到CSS样式时根据CSS规则来对内容进行渲染 1.CSS ...
- day043 前端css样式
标签嵌套规则 块级标签能够嵌套某些块级标签和内敛标签(行内标签) 内敛标签不能块级标签,只能嵌套内联标签 块级标签能够设置高度和宽度 内敛标签不能设置,设置没有效果 Css样式 高度宽度: Width ...
- 百万年薪python之路 -- 前端CSS样式
CSS样式 控制高度和宽度 width宽度 height高度 块级标签能设置高度和宽度,而内联标签不能设置高度和宽度,内联标签的高度宽度由标签内部的内容来决定. 示例: <!DOCTYPE ht ...
- 前端CSS样式操作
目录 字体和文字 设置标签的宽高 字体属性 文字的属性 文字对齐 text-align 文字装饰 text-decoration 首行缩进 text-indent 背景属性 背景图片 边框 画圆 di ...
- 前端css样式及选择器
标题: 1.scc概述 2.行内样式 3.内接样式 4.外接样式(链接式) 推荐使用 5.外接样式(导入式) 6.嵌套规则 7.css选择器 1.scc(Cascading Style Shee ...
- 记一次前端css样式的三角形的应用
1)面试题是这样的要求用css实现 <section> <div></div> <div></div> </section> & ...
- Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...
- ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字
有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据 ...
随机推荐
- Computer-Hunters——冲刺总结
Computer-Hunters--冲刺总结 一.作业相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 hunter--冲刺总结 团队名 ...
- 通过欧拉计划学习Rust编程（第22~25题）
最近想学习Libra数字货币的MOVE语言,发现它是用Rust编写的,所以先补一下Rust的基础知识.学习了一段时间,发现Rust的学习曲线非常陡峭,不过仍有快速入门的办法. 学习任何一项技能最怕没有 ...
- mac解决安装提示“xxx软件已损坏，打不开，您应该将它移到废纸篓”的提示
如果没有“任何来源”选项则运行: macOS Sierra设置说明 若已安装了最新系统 macOS Sierra 则有可能出现某些安装包已损坏.显示未激活.打开崩溃等的提示!!原因是因为新系统屏蔽了任 ...
- Beta冲刺(4/7)——2019.5.26
作业描述 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Beta冲刺(团队) 团队目标 切实可行的计算机协会维修预约平台 开发工具 Eclipse 团队信息 队员学号 队 ...
- SQL-----数据库三种删除方式详解
第一种 使用delete 语句 特点: delete 属于数据库操纵语言DML,表示删除表中的数据, 删除过程是每次从表中删除一行,并把该行删除操作作为事务记录在日志中保存 可以配合事件(tran ...
- 汉字转拼音,TinyPinyin、Pinyin4j与JPinyin哪个库更快
1. 介绍 本文对TinyPinyin.Pinyin4j与JPinyin三个汉字转拼音库的用法.测试代码及转换的结果做一个简单的总结. TinyPinyin 适用于Java和Android的快速.低内 ...
- springboot: xercesImpl.jar和xml-apis.jar (系统找不到指定的文件)
springboot内置的tomcat为8.5.23, tomcat在8.5.2 中 修改了加载jar的方式,8.5.2 版本会解析jar中MANIFEST.MF文件,当该文件包含class-path ...
- 深入理解react-native
欢迎转载,请支持原创,保留原文链接:http://blog.ilibrary.me http://blog.ilibrary.me/2016/12/25/react-native-internal ( ...
- notepad++格式化代码，自动对齐
Notepad++本身没有快捷命令格式化JavaScript代码,需要通过安装扩展插件来实现快捷格式化JS代码的功能.本文主要介绍如何通过安装JStool插件来实现格式化JS代码的功能. 在插件列表中 ...
- 2019-11-29-C#-性能分析-反射-VS-配置文件-VS-预编译
原文:2019-11-29-C#-性能分析-反射-VS-配置文件-VS-预编译 title author date CreateTime categories C# 性能分析 反射 VS 配置文件 V ...