CSS语法格式:一个css规则,由一个选择器和一个格式声明语句构成 例如:h1{color:red; font-size:14px;}
CSS选择器:
1.基本选择器
1)* 号选择器:通配符,将匹配所有的HTML标记,所有的标记都会改变
语法格式:*{color:red;}
2)标签选择器:将匹配指定的标记
语法格式:h1{color:red;}
注意:CSS标签选择器,与HTML标记的名称一样,但不能加尖括号
3)class选择器(类选择器):给一类HTML标记加样式
这里的一类是每个HTML标记都有一个class属性,且class的值一样,class是公共属性,每个HTML标记都有
类选择器必须以 "." 开头
<style type="text/css">
.myClass{
color:red;
background-color:yellow;
}
</style>
h1 class="myClass">标题</h1>
<p class="myClass">段落</p>
4)id选择器:给指定id元素添加样式
注意:标记的id值,必须唯一
每一个HTML标记都有一个id属性
id选择器的名称前以"#"开头,后跟HTML中id的值
id属性一般给js使用,不是用来加样式的 class只能给css用,不能给js用
2.组合选择器
1)多元素选择器
给多个元素加同一个样式,多个选择器之间用","隔开
举例:h1,p,div,.myClass{color:red;}
2)后代元素选择器
给某个标签的后一代元素加样式,选择器之间用空格隔开
举例:div .title{color:red;}
3)子元素选择器
描述:给某个元素的子元素添加样式
举例:div > h1.title{}
CSS注释:
/*CSS注释内容*/
CSS尺寸属性:
width:元素宽度,一定要加px单位
height:同理
CSS字体属性;
font-size 字体大小 例如:font-size:14px;
font-family 字体
font-style: 斜体 取值:italic
font-weight 粗体 取值:bold
CSS文本属性:
color 文本颜色
text-decoration:文本修饰线 取值:none(无) underline(下划线) overline(上划线) line-through(删除线)
text-align 文本水平对齐方式 取值:left center right
line-height:行高 可以用固定值,也可以用百分比
text-indent:首行缩进
letter-spacing:字间距
CSS伪类选择器:(给超链接的不同状态加链接)
正常 (:link) 鼠标没放上之前的链接的样式
放上 (:hover) 鼠标放上后的样式
激活 (:active) 鼠标左键按住不松开的样式
访问过 (:visited) 按下左键,并抬起后的样式
CSS列表属性
list-style:列表样式 取值:none 去掉项目符号前的符号
CSS边框属性;
border-left:(左边框线) 粗细,线型,颜色
线型:none(无线) solid(实线) dashed(虚线) dotted(点状线)
border:同时给四个边加边框线
注意:行内元素<span>没有width和height,也就是说只有块元素才有width和height
CSS内外边距:
内边距:padding
外边距:margin
CSS背景颜色:
background-color 背景颜色
background-image 背景图片地址 例如:background-image:url(images/bg.gif)
background-repeat 背景平铺方式 取值:no-peat(不平铺),repeat-x(水平方向),repeat-y(垂直方向)) background
background-position 背景定位 水平方向定位,垂直方向定位
用英文单词定位:left|center|right top|center|bottom
用固定值定位:50px 50px 距离左边,距离上边
用百分比定位:50% 50% 水平居中 垂直居中
混合定位:10% 10px 靠左边对齐 距离容器顶端10px
全局CSS设置:
1.去除所有标记内外边距 body,h1,p{margin:0;padding:0;}
2.去除项目符号的修饰符号 ul,li,ol{list-style:none;}
3.初始化链接状态颜色 a:link,a:visited{color:blue;text-decoration:none;}
a:hover{color:red;}
4.整个网页 body{font-size:12px;color:#444;}
CSS浮动和清除
float:让元素浮动 取值:left,right
clear:清除浮动 取值:left,right,both(左右都清除)
CSS浮动:
浮动的元素:将向左或向右浮动,浮动到包围元素的边上,或上一个浮动元素的边上为止
浮动的元素不再占据空间了,并且浮动元素的层级要高于普通元素
浮动的元素一定是块元素,不管它原来是什么元素
如果浮动的元素没有指定宽度的话,它将尽可能变窄,因此浮动元素一般要定宽和高
一行内的元素,要浮动一起浮动
浮动的功能,可以实现将多个块元素并列排版
如何让包围元素包住浮动元素,使用清除操作
clear:both 要在浮动元素下面使用清除操作
CSS清除浮动:
CSS清除浮动的功能有两种:
1.可以使包围元素从视觉上包住浮动元素
2.清除之下的其他元素恢复默认排版
3.有浮动,就要有清除
4.如果包围元素指定了高度,可以不用清除
CSS的继承性和优先级
CSS属性继承:外层元素的样式,会被内层元素进行继承,多个外层元素的样式,最终会叠加到内层元素上
什么样的CSS属性会被继承呢?
CSS文本属性都会被继承
CSS优先级:
1.单个选择器的优先级: 行内样式>id选择器>class选择器>标签选择器
2.多个选择器的优先级: 一般情况下,指向越准确,优先级越高
特殊情况下:需要假设一些值: 有几个指向就将它们的值加起来计算,值大的优先级高
标签选择器 1
类选择器 10
id选择器 100
行内样式 1000
display属性
功能:规定网页元素如何显示的问题
取值:none(隐藏),block(以块元素显示),inline(以行内元素显示)
overflow属性:
当内容溢出时该如何显示,取值:visible(可见),hidden(隐藏),scroll(出现滚动条),auto(自动)
cursor光标类型
cursor:网页中的光标的类型 取值:text,help,wait,pointer(手型)
CSS定位
position:定位方式: 取值:static,fixed,relative,absolute
static:静态定位(默认状态,不定位):
fixed:固定定位
relative：相对定位
absolute：绝对定位
定位方式，要与定位属性配合使用
定位坐标：指定定位的元素，偏移目标元素多远的距离
left：定位元素，距离目标元素左边的距离
right：
top：
bottom：
1.固定定位：position：fixed
是相对于浏览器窗口来进行的定位
不占空间，层级要高于普通元素
如果不指定定位坐标的话，固定定位的元素在原地不动
固定定位元素，一定是块元素，不管它原来是什么元素
2.相对定位：position：relative
是相对于原来的自己进行定位
依然占空间，层级高于普通元素
如果不指定定位坐标的话，相对定位元素的位置在原地不动
相对定位元素原来是什么元素，就是什么元素
提示：相对定位和绝对定位一般配合使用
3.绝对定位：position：absolute
是相对于祖先定位元素，来进行的定位
依然占空间，层级高于普通元素
如果不指定定位坐标的话，绝对定位元素的位置在原地不动
绝对定位元素是一个块元素
HTML引入CSS的方法
1.嵌入式
通过style标记，来引入CSS样式
语法格式：<style type="text/css"><style>
提示：style中的样式只能给当前网页用
同一个网页中style样式可以出现多次
2.外联式
通过<link>标记，来引入一个外部的CSS的文件，这样可以实现CSS代码被多个网页共享
<link rel="stylesheet" type="text/css" href="css/public.css" />
link标记常用属性:
rel:也就是说引入什么样类型的文件 取值:stylesheet
type:内容类型
href:引入的CSS文件地址
提示:link标记放在head标记中
同一个网页可以使用多个link来链入多个外部样式文件
3.行内式
每一个HTML标记都有一些公共的属性:class,id,title,style