CSS(Cascading Style Sheets)层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化,能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
CSS的导入方式
优先级:就近原则
行内样式
在标签元素中编写一个style属性,编写样式即可。不符合结构与表现分离
标题
内部样式
h1{
color:green;
}
外部样式
链接式
导入式
@import url("../css/aa.css");
选择器
基本选择器
选择页面上的某一个或者某一类元素
优先级不遵循就近原则,id选择器>clss选择器>标签选择器
标签选择器
选择一类标签
标签名+{}
h1{
color: green;
}
标题1
标题2
类选择器
.+类名{}
可以多个标签归类 是同一个class,可以复用
.hi{
color: green;
}
.hello{
color: aliceblue;
}
标题1
标题2
ID选择器
ID必须保证全局唯一
#id名称+{}
#hi{
color: green;
}
#hello{
color: aliceblue;
}
标题1
标题2
层次选择器
后代选择器
在某个元素的后面
body p{
background: blue;
}
子选择器
只有一代有效果
body>p{
background: blue;
}
相邻兄弟选择器
只有一个,相邻(向下)
.active+p{
background: aqua;
}
2
3
4
4
只有3变色
通用选择器
当前选中元素向下的所有元素
.active~p{
background: aqua;
}
结构伪类选择器
伪类: 条件
ul的第一个子元素
ul li:first-child{
background: blue;
}
ul的最后一个子元素
ul li:last-child{
background: bisque;
}
属性选择器
id等于first的元素
=代表绝对等于
a[id="first"]{
background: blue;
}
class中有link的元素
*=表示包含
a[class*="links"]{
background: blue;
}
herf中以http开头的元素
^=表示以这个开头
a[herf^=http]{
background: blue;
}
herf中以pdf结尾的元素
$=以这个结尾
a[herf$=pdf]{
background: blue;
}
美化网页元素
span
套住重点要突出的字
#title1{
font-size:50px;
}
欢迎学习Java
字体样式
字体类型 font-family
大小 font-size
粗细 font-width bold 加粗 lighter 更细
颜色 color
body{
font-family: 楷体;
font-size: 50px;
font-weight: bold;
color: blue;
}
文本样式
颜色
h1{
color: #FF0000;
}
rgb
h1{
color: rgb(0,255,255);
}
rgba 透明度
h1{
color: rgba(0,255,255,0.1);
}
test-align: center 文本居中 left right
首行缩进 text-indent
行高 line-height
text-decoration
下划线 underline
中划线 lint-through
上划线 overline
h1{
color: rgb(0,255,255);
text-align: center;
text-indent: 2em;
line-height: 300px;
text-decoration: underline;
}
好文阅读
发表评论