css
**一.CSS样式规则:**选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
二.引入CSS样式表
- 行内式
语法格式:
<标记名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标记名> - 内嵌式
语法格式:
< head>
< style type=“text/css”>
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
< /style>
< /head> - 链入式
语法格式:
< head>
< link href=“CSS文件的路径” type=“text/css” rel=“stylesheet” />
< /head>
三.CSS基础选择器
要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。
标记选择器 | 标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } |
---|---|
类选择器 | .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } |
id选择器 | #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } |
通配符选择器 | *{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } |
- 选择器示例
选择器示例 | 示例说明 |
---|---|
a:link | 选择所有未访问链接 |
a:visited | 选择所有访问过的链接 |
a:active | 选择活动链接 |
a:hover | 选择鼠标在链接上面时 |
怎样解决超链接访问过后hover样式不出现的问题?
要按照“爱恨准则”link、visited、hover、active放置。
四.CSS字体样式属性
属性 | 用途 |
---|---|
font-size | 用于设置字号大小 |
font-family | 用于设置字体样式 |
font-weight | 用于定义字体的粗细 |
font-variant | 用于设置变体(定义小型大写字母) |
font-style | 用于定义字体风格 (如设置斜体、倾斜) |
font | 用于对字体样式进行综合设置 |
- 消除浮动三行代码
用在大盒子
.clearfix::after {
/*方法一(对父元素应用after伪对象生产式)*/
content: "";
display: block;/*表示显示模式,变为块级元素。display: none 表示隐藏*/
clear: both;/*清除样式*/
}
.clearfix{
/*方法二,都一样用在父元素*/
overflow:hidden;/*清除浮动,隐藏溢出*/
}
浮动的元素要想居中,必须相对定位
五.CSS文本外观属性
属性 | 用途 |
---|---|
color | 用于定义文本的颜色 |
letter-spacing | 用于定义字间距,所谓字间距就是字符与字符之间的空白 |
word-spacing | 用于定义英文单词之间的间距,对中文字符无效 |
line-height | 用于设置行间距,就是行与行之间的距离,即字符的垂直间距(单位像素px) |
text-align | 设置文本内容水平对齐,相当于html中的align对齐属性 |
text-transform | 控制英文字符的大小写 |
text-decoration | 设置文本的下划线,上划线,删除线等装饰效果 |
text-indent | 设置首行文本的缩进 |
white-space | 设置空白符的处理方式 |
background-color | 定义背景颜色 |
margin:0 auto | 实现块元素水平居中 |
opacity:0.5 | 实现半透明度 |
- display之属性介绍
display三种属性介绍
属性 | 效果 |
---|---|
display:none | 隐藏这个元素 |
display:block | 显示这个元素并把它变成块级元素 |
display:inline | 使元素变成行内元素 |
display:inline-block | 变成不独占一行的块级元素 |
- 边框属性
样式属性 | 常用属性值 |
---|---|
边框样式:border-style: | none无(默认)、solid单实线、dashed虚线、dotted点线、double双实线 |
边框宽度:border-width: | 像素值 |
边框颜色:border-color: | 颜色值 |
边框圆角border-radius: | 像素值 |
综合设置边框:border:四边宽度 四边样式 四边颜色; |
为了更方便地控制网页中的元素,制作网页时,通常先清除元素的默认内外边距。
*{
padding:0; /*清除内边距*/
margin:0; /*清除外边距*/
}
- 背景属性
在CSS中,不仅可以将网页元素的背景设置为某一种颜色,还可以将图像作为网页元素的背景,通过background-image属性实现。
background-image :背景颜色属性
如下代码:
body
{
background-color:#CCC;
background-image:url(images/jianbian.jpg);
}
默认情况下,背景图像会自动向水平和竖直两个方向平铺。如果不希望背景图像平铺,或者只沿着一个方向平铺,可以通过background-repeat属性来控制。
元素 | 属性 |
---|---|
background-repeat | 图像平铺属性 |
background-position | 图像位置属性 |
background-attachment | 图像固定属性 |
六.定位position
static | 静态定位(不定位) |
relative | 相对定位(用于父元素) |
absolute | 绝对定位 (用于子元素) |
fixed | 固定定位 |
(父相子绝)
设置块元素居中
div{
left:50%;
top:50%;
}
-
可以通过四个CSS属性对设置其位置:
- left
- right
- top
- bottom -
定位下的居中
某个方向居中:
1.定宽(高)
2.将左右(上下)距离设置为0
3.将左右(上下)margin设置为auto
如想要左右居中则设置left:0,right:0;再设置margin:0;
绝对定位和固定定位中,margin为auto时,会自动吸收剩余空间 -
绝对定位 absolute
相对定位与绝对定位是合在一起的(父相子绝)相对
相对定位做绝对定位的包含块
就是说绝对定位的上一级的块要定义relative
脱离原来的位置进行定位(别的元素直接填充进去)
最近的有定位的父级进行定位,如果没有,那么相对于文档进行定位 -
固定定位 fixed
其他情况和绝对定位完全一样。
包含块不同:固定为视口(浏览器的可视窗口)
相对于整个页面居中(上下拉也不会改变位置) -
相对定位 relative
保留原来位置进行定位
相对于自己原来的位置进行定位 -
补充
绝对定位、固定定位元素一定是块盒
绝对定位、固定定位元素一定不是浮动
没有外边距合并