css

最新推荐文章于 2024-10-01 23:54:35 发布

weixin_34087503

最新推荐文章于 2024-10-01 23:54:35 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/JackieADBM/p/5548114.html

本文介绍了CSS的基本概念，包括层叠样式表的作用、不同类型的样式应用方法（行内样式、内部样式、外部样式），以及选择器的种类（元素、ID、类、通配符等）。此外还详细讲解了CSS的属性及其单位，如长度单位、颜色单位和文本属性等。

css概述

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

一.样式

1.行内样式

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

2.内部样式

p{ color:bule }

</style>

-----定义在head中

3.外部样式

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

------在建立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内

　　<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 中划线

转载于:https://www.cnblogs.com/JackieADBM/p/5548114.html