一、定义与区分
html(盖房子)局限性:只关注内容的语义
css (美化):层叠样式表、标记语言
html专注地做结构的呈现,样式交给css,即结构html与样式css的分离
css的语法由两个主要的部分构成:选择器以及一条或多条声明。
二、语法规则
css样式是由选择器和声明构成的
<style type="text/css"> //标明使用的是css样式
选择器{
属性1:属性值;
属性2:属性值;
......
}
属性与属性值之间用英文状态的冒号分隔
多个属性之间用英文状态下的分号分隔
选择器名城分大小写,属性和属性值不分大小写
当html的标签名作为选择器名时,不分大小写,习惯小写
css样式区分
方法一:行内样式
<p style="color: red;font-size: 30px;">我是红色的,30px的段落</p>
方法二:内部样式
在同一html文件中使用,通常在head部位
<style type="text/css">
h1{
text-align: center; /* 对齐方式 */
color: red; /* 颜色 */
font-size: 30px; /* 字号 */
}
方法三:链接外部样式表
一个外部样式表可以被多个网页应用
一个网页也可以引用多个外部样式表
1.在html页面的头部输入
<link rel="stylesheet" href=" " />
2.新建css页面
使用css样式语法输入选择器与属性
h3{
text-align: center;
color: #0055ff;
}
3.在HTML页面的link语句中的href属性输入css页面的位置
<link rel="stylesheet" href="css/style.css" />
方法四:导入式
@import url(css/style.css);
三、通配符选择器
常用的通配符: *(多个字符) ?(单个字符)
* 代表所有标签
<style type="text/css">
*{
margin: 0; /* 外边距 */
padding: 0; /* 内边距 */
}
</style>
标签选择器:
html中的标签名作为选择器名称
<style type="text/css">
p{
color:red;
font-size: 25px;
}
</style>
类选择器:
格式:.类{
}
<style>
.red{
color:red;
}
.rt{
font-size: 30px;
}
</style>
调用方法(可以调用多个方法)
<h1 class="red rt">这是一个标题标签</h>
id选择器
id选择器:#定义 调用id 只能用一次
<style type="text/css">
#box{
width: 300px;
height: 150px;
background-color: #ff5500;
}
</style>
调用方法:
<div id="box"></div>
div标签
盒子标签,使用后盒子与盒子之间没有行距
常与id标签一起使用
四、style标签中常用的标签:
.font01{
width: 300px; /*宽*/
height: 150px; /*高*/
border: 1px red solid; /*边框 大小 颜色 实线*/
background-color: #ff5500; /*背景颜色*/
}
文字的外观样式:
.red{
font-family: "楷体"; /*字体*/
font-size: 30px; /*字号*/
font-weight: bold; /*加粗 700a*/
font-weight:normal /*取消加粗,正常字号*/
font-style: italic; /*倾斜*/
color: red; 颜色
letter-spacing: 20px; 字符之间的距离 */
word-spacing: 20px; 单个单词之间的距离
line-height: 1.5em; 文字行间距/行高
text-indent: 2em; 首行缩进
text-transform: capitalize; 首字母大写
text-transform: uppercase; 文本转大写
text-transform: lowercase; 文本转小写
text-decoration: underline; 文字下滑线
text-decoration: overline; 文字上滑线
text-decoration: none; 取消下划线
text-align: center; 居中对齐
text-shadow: 10px 10px 10px #ccc; 水平距离,垂直距离,透明度,颜色
}
常用:
当文字的行高与背景颜色的宽度相等时,文字就会出现在背景的中间
span标签
无任何样式,不换行
五、复合选择器
一、后代选择器
格式1:
标签1 标签2{
属性..........
}
格式2:
标签1 标签2 标签3{
属性..........
}
例:
div p{
color: red;
}
二、子代选择器
定义:只对其子代起到作用,对孙代等不起作用
.nav>a{
text-decoration: none;
}
三、兄弟选择器
1.好兄弟选择器:
定义:邻近兄弟,用+连接要选择的标签,只认识后面的标签,不认识之前的
h1+h2{
font-style: italic;
}
2.普通兄弟选择器
定义:用~连接,选择其后面所有的标签
h1~h2{
border: 2px red solid;
}
四、并集选择器
定义:用,连接,表示的是选择标签一与标签二
p,h3{
color: red;
}
五、标签指定式
定义:将样式指定给特定的标签 既...又...
格式:标签.标签
p.spacial{
color: red;
}
h2.spacial{
color: green;
}
注意:
使用id标签选择器时要加#号
h2.one,h2#box{
border: 1px blue solid;
}
六、css三大特征
一、层叠性
定义:
当优先级相同的情况下,样式不冲突则全部叠加,样式冲突后,执行就近原则(后来者居上)
二、继承性
定义:
当子元素没有自己的样式的时候,会继承父元素的某些特征(文本样式的属性),并不是所有的属性都会被继承(盒子模型)
三、优先级
定义:通配符<标签<类<id<行内样式<!important
选择器权重声明:
四大基础选择器:通配符<标签<类<id
/* 通配符<标签<类<id<行内样式<!important */
权重:
通配符 0 0 0 0
标签 0 0 0 1
类 0 0 1 0
id 0 1 0 0
行内 1 0 0 0
!important 无穷大
继承的权重是0
复合选择器的权重会叠加,但是不会进位 0 0 0 12
七、结构伪类
div
float: left;使得盒子在同一行出现
:root使得所有文字变成统一样式
1.only-child:
选择的是父元素中只有唯一的一个子元素的标签
格式:
<style type="text/css">
p:only-child{
color: red;
}
</style>
2.first-child
选择的是父元素中的第一个子标签
3.before与after
before选择的是标签的首部位置
after选择的是标签的尾部位置
格式:
<style type="text/css">
p::before,p::after{
content: "“"; 添加标签
}
八、链接伪类
顺序:爱恨原则 love hate
a:link {} 访问前
a:visited {} 访问后
a:hover {} 鼠标经过
a:active{} 鼠标点击时
text-decoration: none; 取消下划线
text-decoration: underline; 显示下滑线
li标签常用指令
list-style: none; 取消项目符号
display: inline-block; 块元素转换为行内块
九、盒子常用指令
margin:; 外边距
padding:; 内边距
background:; 背景
background-image:; 背景图片
background-color:; 背景颜色
border-redius:; 圆角
box-shadow:; 阴影