简介
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值{
样式列表;
}
领取专属 10元无门槛券
私享最新 技术干货