一,css三种引入方式
1,行间式
(1)在标签头部的style属性内
(2)属性值满足的是css语法
(3)属性值用key:value形式赋值,value具有单位'
(4)属性值之间用;隔开
<div style="width: 100px; height: 100px; background-color: red"></div>2,内联式
(1)在style标签内(style标签一般作为head的子标签)
(2)属性值满足的是css语法
(3)属性值用key:value形式赋值,value具有单位'
(4)属性值之间用;隔开(一般单独分开赋值)
(5)格式:选择器{样式块}
<style type="text/css"> div { width: 100px; height: 100px; background-color: yellow!important; } </style>3,外联式
(1)在style标签内(style标签一般作为head的子标签)
(2)属性值满足的是css语法
(3)属性值用key:value形式赋值,value具有单位'
(4)属性值之间用;隔开(一般单独分开赋值)
(5)格式:选择器{样式块}
(6)将html与css文件建立联系:html通过link标签链接外部css(一般head中链接)
<link rel="stylesheet" type="text/css" href="02.css">总结:三种方式的优先级:
1,三种方式协同布局
2,不重复的属性一定为唯一位置的唯一值
3,重复属性采用覆盖赋值,保留最后位置的属性值
4,行间式一定是逻辑上最后被解析的位置(js的正常操作就是行间式)(在网页上显示的是行间式的的效果)
5,!important 会影响优先级
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三种引入方式</title> <!-- 内联式 --> <style> div { width: 200px; height: 100px; background-color: green!important; #表示最优先这个 } </style> <!-- 外联式 --> <link rel="stylesheet" type="text/css" href="1.css"> </head> <body> <!-- 行间式 --> <div style="width:100px;height:100px;background-color: red"></div> </body> </html>
二,长度单位以及颜色单位
1,长度单位
em:倍数,默认字体大小的倍数
px:pixel,像素,屏幕上显示的最小的单位,用于网页设计,直观方便
%:百分比
pt:point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业
cm,mm用的少
2,颜色单位
colorname:直接用颜色名称:例green red blue
RGB十进制数字表示颜色
数字(1-255) rgb(255,255,0)
百分号(1-100) rgb(100%,100%,0)
rgb十六进制表示
#rrggbb 简写为rgb 就是把两个挨着的相同的字符简写成一个
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>长度以及颜色单位</title> <style type="text/css"> /*body { background-color: tan; }*/ div { width: 100px; /*width: 25cm;*/ /*width: 345mm;*/ /*width: 10em;通常160px 10rem;*/ /*width: 50vw;50% view width;*/ height: 200px; /*color: cyan;*/ /*color: rgb(100,100,100);*/ /*color: rgba(颜色,饱和度,亮度,透明度0-1);*/ /*color: rgba(0,0,0,0.5);*/ /*#后面直接默认是重叠字母*/ color: #dea } </style> </head> <body> <div>生命是盛开的花朵，它绽放得美丽，舒展，绚丽多资；生命是精美的小诗，清新流畅，意蕴悠长；生命是优美的乐曲，音律和谐，宛转悠扬；生命是流淌的江河，奔流不息，滚滚向前。</div> </body> </html>
三,字体样式
font:字体风格(加粗) 字体大小 字体族科
font-family:字体族科
例:font-family:"宋体","微软雅黑" # 如果系统中没有宋体,则下一个寻找微软雅黑
补充:衬线字体: 宋体,仿宋 serify 任意衬线字体
非衬线字体:微软雅黑,黑体,思源黑体 sans-serif任意非衬线字体
font-size字体大小
font-style字体风格 normal | italic 斜体 | oblique斜体 (一般不用)
font-weight字体加粗 normal(500) | bold 加粗(900) | lighter变细(100) #也可以用括号里面的数字表示
font-variant:small-caps;将文本中英文改成大写字母,或者normol正常显示
补充行高设置:
line-height:50px 注意:行高设置大于等于字体大小,字体在行高中垂直居中显示
coler:字体颜色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字体样式</title> <style type="text/css"> span { /*大小*/ font-size: 50px; /*字重*/ font-weight: 500; /*行高*/ line-height: 15mm; /*字体风格*/ font-style: normal; /*字体样式*/ font-family: "微软雅黑"; /*可以设置字体重量,大小,样式*/ font: lighter 100px "思源" } </style> </head> <body> <span>生活，就是面对现实微笑，就是越过障碍注视未来；生活，就是用心灵之剪，在人生之路上裁出叶绿的枝头；生活，就是面对困惑或黑暗时，灵魂深处燃起豆大却明亮且微笑的灯展。 </span> </body> </html>
四:文本样式
color:文本样式
text-align:横向排列
left 居左| center 居中| right 居右vertical-align:纵向排列
baseline:将支持valign特性的对象内容基线对齐 sub:垂直对齐文本的下标 super:垂直对齐文本上标 top:将支持valign特性的对象内容与对象顶端对齐 text-top:将支持valign特性的对象文本与对象顶端对齐 middle:将支持valign特性的对象内容与对象中部对齐 bottom:将支持valign特性的对象内容与对象底端对齐 text-bottom:将支持valign特性的对象文本与对象底端对齐text-indent:字体缩减
text-decoration:字划线(underline下划线,line-through中划线,overline上划线 none 取消下划线)
letter-spacing:字间距
word-spacing:词间距
word-break:自动换行
normal:默认换行规则 break-all:允许在单词内换行<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文本样式</title> <style type="text/css"> span { /*字体颜色*/ color: tan; /*水平居中方式:left center right*/ text-align:center; /*字划线:underline line-though overline none*/ text-decoration: overline; /*字间距*/ letter-spacing: 3px; /*词间距*/ word-spacing: 10px } /*应用场景*/ a { text-decoration: none; } div { width: 300px; /*显示方式(行内块元素,分块在一行显示)*/ display: inline-block; /*垂直排列方式:top baseline bottom*/ vertical-align: baseline; /*缩进*/ text-indent: 2px; } /*遇到连体的英文,html将其解析为一个单词(作为一个整体)*/ .div { /*按标签的设定宽度强行换行,可以在单词(整体)内部换行*/ word-break: break-all; } h1 { /*居中显示标题*/ text-align: center; } </style> </head> <body> <h1>标题</h1> <span> 装模装样 愣头愣脑</span> <a href=" ">山势雄伟 群山簇立</a> <div> 我们在河边急三火四地脱光衣服，扑进小河里，立刻开始打水战，追逐嬉戏了。你看，我们分两队，一队为“敌人”一队另是“红军”。一双双小手掌把水往对方泼去，泼得人人脸上满是晶莹的水珠。水把眼睛弄模糊了，我们便各自退到一边，用手拭去，然后再猛烈“进攻”。整个小河立时一片喧哗，叫喊声，欢笑声此伏彼起，汇成了快活的交响曲。水仗打累了，就在河里追逐嬉戏。一个追，一个跑，在水里穿来钻去，小身子像条泥鳅一样滑，怎么也抓不到。河面上的欢歌笑语，在和两岸远远的荡开了。</div> <div> Whatever is worth doing is worth doing well.</div> <div class="div">The black earthen jar standing on the stove is rustic, but it seems to be very particular. The simple body is equipped with a very curved spout and a very chic pot. </div> </body> </html>
五,背景样式
background
background:<背景颜色>|<背景图像>|<背景重复>|<背景附件>|<背景位置> 例:background:red url("1.png") no-repeat 100px 10pxbackground-color设置背景颜色,或设置成transparent(透明)
background-image背景图片url或者none
background-repeat背景重复repead | repeat-x | repead-y | no-repeat (就是把背景图片平铺)
background-attachment 背景附件 scroll | fixed
backgroud-position背景位置
background-position:水平方向 垂直方向 background-position:left top; background-position:100px 100px; 横向:left | center |right 纵向:top | center |bottokm 或者使用百分比或者使用数字都可以<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景样式</title> <style type="text/css"> div { width: 300px; height: 300px; background-color: red; } div { /*背景图片(括号里面放的是图片的地址)*/ background-image: url("data/bg_repeat.gif"); /*平铺: no-repeat repeat-x repeat*/ background-repeat: no-repeat; /*定位*/ /*10px == 10px center 设置一个值,第二个值默认为center*/ /*10px 10px 第一个值控制水平位置,第二个值控制垂直位置*/ /*background-position: right center;*/ /*定位相关的涉及到滚动时的效果: scroll fixed*/ background-attachment: fixed; } div { /*整体设置*/ background: url("data/bg_repeat.gif") 10px 10px no-repeat red; } </head> <body> <div></div> <br>*50 </body> </html>