css

Posted 2020-07-18 上山打老虎

css概述

 

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 html 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

一.样式

1.行内样式

<p   style="color:red">你好</p>

-----定义在body某行内

2.内部样式

<style type="text/css">

p{  color:bule  }

</style>

-----定义在head中

3.外部样式

p{  color:bule  }-----写在css文件中

<link  rel="styleSheet"  href="css/xx.css">-----写在head中

------在建立css文件时文件名要与相关的html名一致，方便区分

 

二.选择器

1.元素选择器

如：  p{ color:red }

2.id选择器

#id值{}  如： #t1{color:red}

3.类选择器

.class值{}  如： .city{color:red} ----如果有多个，用‘,‘隔开，群组选择

4.通配选择器

*{}    如：*{color:red}------所有字体都为红色

5.包含选择器

#d1 h1{color:red}----定义在css/head内

<div id="d1">

　　<h1 >你好</h1>-----body 内

</div>

#d1> h1{color:red}------子元素选择

#d1+ h1{color:red}-------兄弟（弟弟）元素选择

6.伪类及伪类选择器

a:link {color:gray;}/*链接没有被访问时前景色为灰色*/

a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/

a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/

a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/

7.选择器优先级
!important > id > class > element(元素) > 伪类

三.属性
作用：用于指明格式
1.长度单位
　a.绝对长度：cm、mm、in
　b.相对长度：px、em

　　em:用户的浏览器默认渲染的文字大小是“16px”，弹性设计有一个关键地方Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小，我们可以这样来设置1em，0.5em，1.5em等，而且“em”还可以指定到小数点后三位，比如“1.365em”
1em=16px

2.颜色单位

　　a.用百分比值表示：  color:rgb(50%,0,50%)

　　b.用简化十六进制数定义：  #80

　　c.为颜色取名： red 、green

3.字体属性

　　a.   font-fimally-----字体

　　b.   font-size-----字体大小  如： font-size=“30px”

　　c.   font-style-----设置字体风格。

　　d.   font-weight-----设置字体的粗细。

4.文本属性

　　a.  color----设置文本颜色

　　b.  line-heigh----设置行高

　　c.  indent----缩进元素中文本的首行。

　　d.  transfrom----控制元素中的字母。

 

　　　　　 h1 {text-transform:uppercase}----全大写
　　　 h2 {text-transform:capitalize}----首字母大写
　　　 p {text-transform:lowercase}----全小写
　 e. decoration-----向文本添加修饰。

　　overline 上划线
　　underline 下划线
　　line-through 中划线