CSS基本用法_m0_62786471

大大的周 02-07 2609

一、CSS简单内容

1)三种CSS样式

1.行内CSS样式

2.内嵌式CSS

3.链入式css样式

2)选择器

标记选择器

类选择器

id选择器

通配符选择器

交集选择器

后代选择器

并集选择器

3）字体样式属性

font-size: 字号大小 (px 像素, em 相当于当前对象内文本的字体尺寸)

font-family

font-style

定义服务器字体

word-wrap属性

3)文本外观属性

二、CSS高级特性

2.1层叠性

2.2继承性

2.3 css优先级?

一、CSS简单内容 1)三种CSS样式 1.行内CSS样式  <h2 style="color:#F36 ;font-size:14px">使用CSS修饰二级标题的大小和颜色</h2> 2.内嵌式CSS <style type="text/css"> h2{ text-align:center; } p{ font-size:16px; color:#3F0; text-decoration:underline; } </style> <h2>内嵌式CSS样式</h2> <p>内嵌式，style标记通常位于head头部中，title标记后</p> 3.链入式css样式 <link rel="stylesheet" type="text/css"/ href="demo.css"> <h2>链入式css样式</h2> <p> 通过link标记将拓展名为.css的外部样式表文件链接到HTML文档中</p>

文件名:demo.css

@charset "utf-8"; /* CSS Document */ h2{ text-align:center } p{ font-size:10px; color:yellow; } 2)选择器标记选择器 <style type="text/css"> h2{ background-color : yellow; } p{ background-color : green; } </style> <body> <h2>标记选择器</h2> <p>所有的p标记都会被控制到</p> <p>我是第二个p标记</p> </body> 类选择器 <style type="text/css"> .a{ color:red; } .b{ color:green; } .c{ color:yellow; } </style> <h2 class="a">红色二级标题文本</h2> <p class="b">绿色段落1文本</p> <p class="c">黄色段落2文本</p> <p>段落3文本</p> id选择器 <style type="text/css"> #bold{ font-weight:bold; } #font24{ font-size:24px; } #a,#b{ color:green; } </style> <p id="bold">段落1: id="bold",设置粗体文字</p> <p id="font24">段落2: id="font24",设置字号为24px</p> <p id="a">id为1</p> <p id="b">id为2</p> 通配符选择器 <style type="text/css"> *{ margin:0; padding:0; /*清除页面默认边距*/ /*通配符选择器常用做法*/ } </style> 交集选择器 <style type="text/css"> h3.special{ color:#3F3 } </style> <body> <p class="special" >指定了.special类的段落文本(红色)</p> <h3 class="special">指定了.special类的标题文本文本(绿色)</h3> </body> 后代选择器 <style type="text/css"> p strong{ color:red; } strong{ color:blue; } </style> <body> <p>段落文本,<strong>嵌套在段落文,本中使用strong标记加粗的文本(红色)</strong></p> <strong class="blue">嵌套之外由strong标记的定义的文本(蓝色)</strong> 并集选择器 <style type="text/css"> h3,.special,#one{ text-decoration:underline; } </style> <body> <h2>二级标题文本</h2> <h3>三级标题文本,加下划线</h3> <p class="special">段落1标本本,加下划线</p> <p>段落2普通文本</p> <p id="one">段落3,加下划线</p> </body> 3）字体样式属性 font-size: 字号大小 (px 像素, em 相当于当前对象内文本的字体尺寸) p{font-size:12px;} font-family

font-family: 字体

p{font-family:"微软雅黑";}

font-weight: 字体粗细

（normal 默认值, bold 粗体, bolder 更粗, lighter 更细, 100~900）

font-style

font-style: 字体风格

(normal: 默认值 , italic: 斜体 , oblique 倾斜)

定义服务器字体

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> @font-face{ font-family:ljh; src:url(font/FZJZJW.TTF); } p{ font-size:24px; font-family:ljh; } </style> </head> <body> <p>锄禾日当午</p> <p>城春草木深</p> </body> </html> word-wrap属性

word-wrap 属性 (normal 只在允许的断字点换行， break-word 在长单词或URL地址内部进行换行)

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> p{ width:100px; height:100px; border:1px solid #F00; } .break_word{ word-wrap:break-word; } </style> </head> <body> <span>word-wrap:normal;</span> <p>网页平面ui设计学院http://icd.itcast.cn/</p> <span>word-wrap:break-word;</span> <p class="break_word">网页平面ui设计学院http://icd.itcast.cn/ </p> </body> </html> 3)文本外观属性

color: 文本颜色

(预定义颜色,如 red,green 十六进制,如#FF0000 RGB代码, 红色 rgb(255,0,0))

letter-spacing:字间距 (字符与字符之间的空白，允许负值,默认为normal)

word-spacing: 单词间距(英文单词之间的间距,允许负值,默认为normal)

line-height:行间距(行与行之间的距离， px,em,百分比%)

text-transform:文本转换

(none: 不转换，默认 capitalize:首字母大写 uppercase:全部字符转换为大写 lowercase：全部字符转换为小写)

text-decoration：文本修饰

(none: 没有装饰 underline:下划线 overline:上划线 line-through:删除线)

<!doctype html> <html> <head> <meta charset="utf-8"> <title>文本装饰</title> <style type="text/css"> .a{ text-decoration:underline; } .b{ text-decoration:overline; } .c{ text-decoration:line-through; } .d{ text-decoration:underline line-through; } </style> </head> <body> <p class="a">设置下划线</p> <p class="b">设置上划线</p> <p class="c">设置删除(line-through)线</p> <p class="d">同时设置下划线和删除线</p> </body> </html>

text-align:水平对齐方式

(left:左对齐 right:右对齐 center:居中对齐)

text-indent: 首行缩进 (px,em,百分比%)

white-space:空白处理 (normal:常规空格、空行无效,满行自动换行 per: 预留格式保留空格 nowwrap:空格空行无效，强制文本不能换行，除非遇到换行标记<br> )

text-shadow:阴影效果

选择器{text-shadow: h-shadow v-shadow blur color} 说明水平阴影距离垂直阴影距离模糊半径阴影颜色 <!doctype html> <html> <head> <meta charset="utf-8"> <title>文本装饰</title> <style type="text/css"> p{ font-size:50px; text-shadow:10px 10px 10px red; </style> </head> <body> <p >hello css3</p> </body> </html>

text-overflow: 标示对象内溢出文本

(clip,修剪溢出文本，不显示省略标记...... ellipsis 用省略标记被修剪的字符，省略标记插入最后一个字符。)

选择器{text-overflow: 属性值;} <!doctype html> <html> <head> <meta charset="utf-8"> <title>文本装饰</title> <style type="text/css"> p{ width:200px; height:100px; border:1px solid #000; white-space:nowrap; /*强制文本不能换行*/ overflow:hidden; /*修剪溢出文本*/ text-overflow:ellipsis; /*用省略号标记标示被修剪的文本*/ } </style> </head> <body> <p >把很长的一段文本中溢出的内容隐藏，出现省略号</p> </body> </html>

二、CSS高级特性 2.1层叠性

层叠性:不同样式在同一元素上叠加显示 {用class,id同时修饰统一元素}

2.2继承性

<!doctype html> <html> <head> <meta charset="utf-8"> <title>继承性</title> </head> <style type="text/css"> body{ color:blue; font-size:20px; } </style> <body> <h2>继承性</h2> <p>子级元素继承父级元素的CSS样式</p> <div>理解起来非常简单</div> </body>  </html>

2.3 css优先级?

A: id选择器权重100，类选择器权重10，标记选择器权重1

B: 继承样式权重为0

C: 权重一样的，就近原则

D: 内部和外部的，就近原则 !important 优先

E: 无论多少个标记选择器叠加，其权重不会超过类选择器，同理...

对于B的代码理解:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>层叠性</title> </head> <style type="text/css"> strong{color:red;}  #header{color:green;}  </style> <body> <p id="header" class="blue"> <strong>继承样式不如自己的定义</strong> </body> </html>