为什么呈现CSS?
- HTML满足不了设计者的需要
- HTML操作属性不不便
- HTML外面增加款式带来的是臃肿和繁琐
CSS
CSS：层叠样式表 设置网页外观的款式
css的书写形式
行内样式表
通过style的属性值来设置元素的款式
<标签名 style="属性1:属性值1; 属性2:属性值2;">内容</标签名>注意事项
1. style便是元素的属性2. 属性与属性值之间用:相隔3. 多组属性值之间用;相隔4. 没有实现元素款式和构造相拆散代码案例
<h2 style="font-family: '楷体'; color: blue; ">二级题目</h2>内联样式表
将CSS代码写在<head></head>之间 并用style标签定义<head> <style> 选择器 { 属性1：属性值1; 属性2：属性值2; 属性3：属性值3; } <style><head>注意事项
- type="text/css"能够省略
- 只能管制以后页面
- 没有彻底实现款式和构造相拆散
<head> <meta charset="utf-8"> <title></title> <style> h2 { color:red; font-family: 楷体; } </style> </head>内部样式表
将样式表放入一个或多个以.css扩展名的文件中 ，用link标签将样式表引入html文件中
<head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="./stylesheet.css"> </head>CSS样式表总结
选择器
作用：找到特定的页面HTML元素
标签选择器
长处: 可能疾速为某一类元素设置款式
毛病： 不能设计差异化款式。
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div { color: blue; font-family: "楷体"; font-size: 20px; } span { color: green; font-family: "宋体"; } </style> </head> <body> <div>宰割 分区</div> <div>宰割 分区</div> <div>宰割 分区</div> <div>宰割 分区</div> <span>跨度 跨距</span> <span>跨度 跨距</span> <span>跨度 跨距</span> <span>跨度 跨距</span> </body></html>类选择器
可为一个或某几个元素设置雷同的款式 类名用英语示意，见命之意。
.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 属性4:属性值4; }标签
<标签 class="类名" >内容</标签>代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .c-red { color: red; } </style> </head> <body> <h2>二级题目</h2> <h2 class="c-red">二级题目</h2> <h2>二级题目</h2> <h2>二级题目</h2> </body></html>谷歌案例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> span { font-size: 100px; } .c-red { color:red; } .c-blue { color:blue; } .c-yellow { color:yellow; } .c-green { color:green; } </style> </head> <body> <span class="c-blue">G</span> <span class="c-yellow">o</span> <span class="c-red">o</span> <span class="c-blue">g</span> <span class="c-green">l</span> <span class="c-red" >e</span> </body></html>多类名选择器
标签能够领有多个类名，以达到更好的目标。类名之间用空格相隔开。
款式
<style> .c-red { color: red; } .f-family { font-family: "楷体"; } </style>标签
<h2 class="c-red f-family">二级题目</h2>id选择器
选择器
#id名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 属性4:属性值4; }标签
<标签 id="id名">内容</标签>注意事项
- ID选择器是惟一的，一个标签只能领有一个id名
- id选择器和类抉择惟一的区别在于应用次数上
款式
<style> #c-red { color: #0A9CE8; } </style>标签
<p id="c-red">段落 </p>通配符选择器
抉择页面中所有的标签设置雷同的款式,倡议轻易应用
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 属性4:属性值4; }款式
<style> * { color: #87CEEB; } </style>标签
<body> <p>段落</p> <div>宰割 分区</div> <span>跨度 跨距</span> <h2>题目</h2></body>CSS字体
font-size
作用：设置字号
款式
<style> body { font-size: 16px; } .f-fz { font-size: 20px; } </style>标签
<body> <p class="f-fz">尧子陌</p> <p>临风笑却世间</p> </body>注意事项
- 不同浏览器的默认字号都不一样，因而间接给body设置默认字体。
font-family
font-family:设置字体
p { font-family: "agency fb", "microsoft yahei,楷体";注意事项
- 能够指定多个字体，字体之间用英文状态下逗号相隔
- 英文的字体要用""包裹
unicode字体
代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> span { font-family:"\6977\4F53"; } </style> </head> <body> <span>跨度 跨距</span> </body></html>fon-weight
font-weiht：字体粗细
注意事项
- 能够用HTML实现加粗成果 也能够用css实现 但没有语义
款式
<style> p { font-weight: 700; } h2 { font-weight: normal; } </style>标签
<body> <p>段落</p> <h2>二级题目</h2> </body>font-style
font-style:字体歪斜
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> em { font-style: normal; } </style> </head> <body> <em>让歪斜的字体变得失常</em> </body></html>font综合写法
选择器 {font:font-style font-weight font-size/line-height font-family}注意事项
- 不能省略font-size font-family两个属性
CSS外观属性
color
款式
<style> h2 { color: red; } h4 { color: #008000; } p { color: rgb(255, 255, 0); } </style>标签
<body> <p>尧子陌</p> <h2>二级题目</h2> <h4>四级题目</h4> </body>text-align
text-align:文本程度对齐形式
注意事项
- 是让盒子的内容程度居中 而不是让盒子程度居中
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> h2 { text-align: center; } </style> </head> <body> <h2>二级题目</h2> </body></html>line-height
line-height:行高
个别状况下 行高比默认字体大7 8像素即可<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body { font-size: 16px; } p { line-height: 24px; } </style> </head> <body> <p>《欲望号街车》改编自驰名剧作家田纳西的同名戏剧。影片讲述了美国北方美女布兰奇被解除家庭教师职务后，来到新奥尔良投奔妹妹的故事。妹妹的丈夫是一个性情粗鲁的波兰移民后嗣，名为斯坦利。布兰奇和斯坦利一见面，就彼此产生讨厌。起初，她结识了斯坦利的敌人米奇，两人产生感情，但斯坦利并不看好这段恋情。当斯坦利发现布兰奇被开革老师职务的起因后，他通知了米奇，以致米奇和布兰奇离别。婚姻的可怜、家庭的破产、亲人的死亡，加上四周的男人都不现实，一系列的喜剧以致布兰奇精神失常，最终导致覆灭的喜剧命运。</p> <p> 片中费雯·丽和马龙·白兰度的表演已成为经典。影片荣获1952年第24届奥斯卡金像奖12项提名，并最终获得最佳女主角、最佳男配角、最佳女配角、最佳艺术领导4项大奖。同时，影片荣获1951年第16届电影节评审团特别奖。男主角马龙·白兰度凭借斯坦利一角声名鹊起。</p> </body></html>text-indent
text-indent:首行缩进 个别用em示意 1em等于一个汉字的宽度
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> p { text-indent: 2em; } </style> </head> <body> <p>《欲望号街车》改编自驰名剧作家田纳西的同名戏剧。影片讲述了美国北方美女布兰奇被解除家庭教师职务后，来到新奥尔良投奔妹妹的故事。妹妹的丈夫是一个性情粗鲁的波兰移民后嗣，名为斯坦利。布兰奇和斯坦利一见面，就彼此产生讨厌。起初，她结识了斯坦利的敌人米奇，两人产生感情，但斯坦利并不看好这段恋情。当斯坦利发现布兰奇被开革老师职务的起因后，他通知了米奇，以致米奇和布兰奇离别。婚姻的可怜、家庭的破产、亲人的死亡，加上四周的男人都不现实，一系列的喜剧以致布兰奇精神失常，最终导致覆灭的喜剧命运。</p> </p> </body></html>text-decoration
text-decoration:文本装璜
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> span { text-decoration: underline; } </style> </head> <body> <span>尧子陌</span> </body></html>css外观总结
开发工具
快捷方式
- f12
- ctrl+shift+I
- 右击查看 即可关上
注意事项 /
- 左侧是构造 右侧是款式