css基本学习

来源：互联网发布：coc女王数据编辑：程序博客网时间：2024/06/10 11:19

一.css的概念及其作用

1.css的概念

层叠样式表，该样式定义如何显示html中的元素

2.css的作用

a.修饰html元素，使得html更加好看

b.修饰与内容分离，提高了效率

c.提高了代码的复用性

二.css的书写规范与html怎么引入css

1.内联样式

当特殊的样式应用到个别的元素时，可以使用内联样式，该样式把style属性内嵌到html标签中。

<html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><p style="color:red; font-size:100px">hello world</p></body></html>

语法规则:

a.style属性内嵌到html标签中

b.style中属性的写法:属性:属性值

c.多个样式之间使用分号隔开

2.内部样式

当单个标签要使用某种样式时，可以使用内部样式,在head标签中使用css标签引入

<pre name="code" class="html"><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">p{color:red; font-size:100px}</style></head><body><p >hello world</p></body></html>

语法规则；

a.在head标签中使用引入css标签

b.要使用样式的标签{属性:属性值。。。。}

c.属性之间有分号隔开

3.外部样式

当很多页面都要引用该样式时，就可以把它写成一个css文件，供html文件引用

html文件

<html><head><meta charset="UTF-8"><title>Insert title here</title><link rel="stylesheet"   type="text/css" href="psheet.css"/></head><body><p >hello world</p></body></html>

css文件

@CHARSET "UTF-8";p{color:red;font-size:100px;}

语法规则；

a.把样式写成css文件

b.使用link标签引入css文件

c.属性的写法：属性：属性值
d.多个属性之间使用分号;隔开

4.@import方式

<html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">@import url("psheet.css");</style></head><body><p >hello world</p></body></html>

从上面可以看出,@import方式是内部样式和外部样式的结合，link和import都可以把css文件引入到html文件中

link与@import方式的区别：
                a.link所有浏览器都支持 import部分低版本IE不支持
                bimport方式是等待html加载完毕之后在加载
               (cimport方式不支持js的动态修改

优先级:

内联样式表>内部样式表>外部样式表

三.css的选择器

1.基本选择器

a.元素选择器

语法规则:

html标签{css属性}

p{color:red;font-size:100px;}

b.id选择器

语法规则:id的唯一性

#id名{css选择器}

<html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css"><!-- id选择器的定义-->#p1{color:red;font-size:100px;}</style></head><body><p id="p1">hello world</p></body></html>

id必须是唯一的，web标准规定不允许两个相同标签的id是相同的,并且id是javascript获取对象的一个标识，所以必须是惟一的

c.类选择器.

语法规则:class的值{css属性}

<html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">.p1{color:red;font-size:100px;}</style></head><body><p class="p1">hello            world</p><p class="p1">hello            world</p></body></html>

类选择器可以组合使用

优先级:id>class>元素选择器

2.属性选择器

语法规则:基本选择器[属性=”属性值“]{css属性}

<html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">input[type="text"]{background-color:red;}input[type="password"]{background-color:pink;}</style></head><body><form>账号<input type="text"/><br/>密码<input type="password"/><br/></form></body></html>

3.伪元素选择器

主要用于向某些选择器设置特殊效果

例a标签的伪元素选择器

语法规则：
               静止状态   a:link{css属性}
               悬浮状态   a:hover{css属性}
               触发状态   a:active{css属性}
               完成状态   a:visited{css属性}

<html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">a:link{color:red}a:hover{color:yellow}a:active{color:pink}a:visited{color:green}</style></head><body><a href="#">伪元素选择器</a></body></html>

4.层级选择器

如果有有两个分层的区域使用的最外层选择器不同，内层选择器相同,但是想使这两个区域最内层的部分仍有差别,那么使用层级选择器可以精确的表示。

语法规则:

父类选择器子类选择器。。。。{css 属性}

<html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">#d1 .c2 td{color:red}</style></head><body><table id="d1" border="1"><tr class="c1"><td>第一个表格一行第一列</td></tr><tr class="c2"><td>第一个表格二行第一列</td></tr></table><table id="d2" border="1"><tr class="c1"><td>第二个表格一行第一列</td></tr><tr class="c2"><td>第二个表格二行第一列</td></tr></table></body></html>

四.css属性

1背景属性

2文本属性

3字体属性

4链接属性

5列表属性

6尺寸属性

7显示属性

    display:
           属性值：none:隐藏
                   block:块级显示
                   inline：行级显示

8浮动属性

五css的盒子模型

0 0