CSS笔记第 1 天

简介

CSS指的是:cascading Style sheets层叠样式表

作用:用于修饰HTML元素的样式!通常存储在.css文件中!

好处:让内容与表现完全分离,提高代码复用率!

定义CSS的三种方式*****

CSS中单个样式的定义方式:

使用键值对描述样式,键与值之间用英文冒号连接,多个样式间使用英文分号分割!

例如:设置宽度样式为200px,设置高度样式为200px

width:200px;height:200px

方式1.内联样式(行内样式)

定义在元素的style属性中:

案例:

从前有座山,山上有座庙!

方式2.内部样式表

定义在网页的head标签中的style子标签中!

格式:

选择器1{

样式列表;

}

选择器2{

样式列表;

}

案例:

修改网页中所有input标签的文本颜色为红色:

input{

color:red;

cursor:pointer;

}

---------------------------------------------------------------------------------------------------------------------------------

方式3.外部样式表

步骤1.定义在css文件中,编写方式与内部样式表的style标签中一致

步骤2.在html中的head标签中,编写link标签,引入css文件

格式:

案例:

demo1.css文件:

@charset"UTF-8";

img{

width:1000px;

}

p{

text-align:center;

}

HTML中引入的代码:

常用样式

字体大小:font-size:长度;

文字颜色:color:颜色值;

背景颜色:background-color:颜色值;

背景图片: background:url("图片地址");

内容显示的位置:text-align:left/center

/right;

元素的宽度:width:长度;

元素的高度:height:长度;

鼠标形状:cursor:pointer;

CSS中如何编写注释

与Java中的多行注释完全一致

/*注释内容*/

CSS三大特性*****

继承性

父元素的样式,会继承给子元素!

层叠型

同一个元素,可以添加多个样式,不冲突部分可以层叠,冲突部分参照优先级

优先级

默认情况下,优先级遵循就近原则,离得近的样式优先级高!

在优先级中,存在一些特殊的样式:1.浏览器默认样式2.继承得来的样式!

优先级等级:

i.内联样式

ii.距离较近的内部样式表或外部样式表

iii.默认样式

iv.继承样式

处于相同等级的样式,使用不同的选择器也存在优先级区别:

ID选择器>类选择器>元素名称选择器

权重分别为:id选择器(1000),类选择器(100),元素名称选择器(1)

绝对优先样式

在样式的值后,分号之前,加入绝对优先标记:

!important;

格式:

选择器{

样式key:样式值!important;

}

选择器

在CSS中,可以通过选择器,锁定一个或一组元素,将编写好的样式到选择器选定的元素!

基本选择器*****

元素名称选择器

作用:通过元素名称锁定一个或一组元素

格式:

元素名称{

样式列表;

}

案例:

修改网页中所有input标签的文本颜色为红色:

input{

color:red;

}

ID选择器

作用:通过元素ID属性值锁定一个(ID属性可以重复,但是不要重复!)

我们刚学习完毕oracle数据库,了解ID的作用,一般用于唯一标识.所以ID属性不建议重复,常用于给某一个元素添加样式!

格式:

#id值{

样式列表;

}

类选择器

作用:通过元素class属性值锁定一个或一组元素用于给元素分类,按照不同的分类添加样式!

格式:

.class值{

样式列表;

}