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">
<!--
@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>
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第3章初识CSS相关推荐
- HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型
本教程案例在线演示 有路网PC端 有路网移动端 免费配套视频教程 免费配套视频教程 教程配套源码资源 教程配套源码资源 div div 可定义文档中的分区(division). div 标签可以把网页 ...
- HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识
本教程案例在线演示 有路网PC端 有路网移动端 免费配套视频教程 免费配套视频教程 教程配套源码资源 教程配套源码资源 网页开发工具 VSCode 或 WebStorm HTML简介 HTML:Hyp ...
- html5中单选按钮的互斥应该,HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单...
## 本教程案例在线演示 ## 教程配套源码资源 ### 表格 table标签(表格). tr标签(行). td标签(标准单元格). caption标签(标题). th标签(表头单元格). 为了更深一 ...
- HTML5CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第10章有路网PC端主页实战整合
本教程案例在线演示 有路网PC端 有路网移动端 免费配套视频教程 免费配套视频教程 教程配套源码资源 教程配套源码资源 制作有路网首页 有路网首页布局框架制作 划分区域,确定div 测量各个区域的宽高 ...
- HTML5+CSS3从入门到精通 中文pdf版
HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南.高级程序设计.开发指南同类图书,本书是一本适合快速入手的 ...
- 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程(权重,盒子模型)
一.基础班学习路线 三.CSS3基础 1.CSS的三大特性 CSS三大特性之层叠性 CSS三大特性之继承性 行高的继承 CSS三大特性之优先级 CSS权重的叠加 十个在最后累加会变成0,0,0,10: ...
- Web前端html5+css3前端开发入门学习笔记
文章目录 前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...
- html 线条 样式,HTML5+CSS3从入门到精通 线条样式如何设置
本篇教程探讨了HTML5+CSS3从入门到精通 线条样式如何设置,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < lineWidth: 设置线条的宽度,值是一 ...
- HTML5 CSS3编程入门经典 ((美)Rob Larsen) pdf扫描版
HTML和CSS是构建网页所需要了解的两种核心编程语言,拉尔森编著的这本<HTML5&CSS3编程入门经典>详细介绍了这两种语言. <HTML5&CSS3编程入门经典 ...
最新文章
- POJ3270 Cow Sorting ——置换群
- PyCharm2017软件安装教程
- win32 GDI 画图 防止闪烁
- NET问答: 如何检查一个 string 是否为有效的 url 格式?
- Linux 文件系统之 inode 概述
- 15 CT04创建特性程序DUMP解决方法
- echart3 click点击事件使用
- java实现非对称加密算法
- 三面,字节跳动电商Java面经(已过)
- 配合Eclipse MAT工具排查服务器内存溢出问题
- 【评测】Attana Cell 200蛋白互作分析仪,实现细胞原位生物大分子互作检测
- CAD VCL Multiplatform SDK 定制Crack
- Web前端之CSS层叠样式表相关案例
- Python(贪心算法)问题 D: 删数问题_输入一个高精度的正整数N,去掉其中任意S个数字后剩下的数字按原左右次序组成一个新的正整数。
- html5 在线设计,推荐十款非常优秀的 HTML5 在线设计工具
- [新星计划] Python环境搭建 | 万丈高楼平地起
- 【弄nèng - SpringCloud】应用篇 —— 整合Zipkin【Finchley版】
- 最近的一些杂感-20220107
- 计算机专业专科可以进的国企,专科毕业想要进国企?这四大专业是首选,成功率高达50%...
- 重磅!全站首发,新鲜出炉,1024特辑,手把手教你采集 高德地图 搜索结果,获取全国海底捞信息并可视化
热门文章
- 计算机控制台win10,Win10系统打开Windows控制台的方法
- 规模化敏捷转型中,哪些问题会被经常问到?
- 阿里云ECS七天训练营-搭建FTP
- 我有200台摄像机4MB/s,后端防火墙吞吐量多少G够用?应用层1G够用吗?
- 认知仿真:是复杂系统建模的新途径吗
- 前端开发:Vue项目中解决Emitted value instead of an instance of Error问题
- keil5的暗色配色方案
- uniapp 简单表单布局1
- android中实现微信九宫格,微信小程序九宫格布局
- Oracle ILM相关(Information lifecycle management)