css导入方式 1.标签内联2.内部放置3.外部放置4.@import url()
css选择器 1.标签选择器2.id选择器3.class选择器4.组合选择器
css优先级 就近原则 标签>id>class>*
为了防止不支持css的浏览器将<stylr>...</style>标签间的css规则当成普通字符串,
而显示在网页上,应将css的规则代码插入<!-- -->标签之间
1、字体与颜色
font-family 字体
font-size:30px 字体大小
font-style 字体样式
font-weight normal 不加粗 bold 加粗 bolder 更加粗 lighter 更细
2、背景颜色
background-color 背景颜色
background-image 背景图片
background-repeat: no-repeat; 不平铺 repeat-x 水平平铺 repeat-y垂直平铺
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动
background-position 设置背景图像的起始位置
3、文本属性
letter-spacing 字间距 必须加空格才能看出效果
word-spacing 词间距
text-decoration:none none用来把a标签的下划线去掉
underline 下划线 overline 上划线 line-through 删除线
text-align: left center right 文本左对齐/居中/右对齐
text-indent p标签段落首行缩进
line-height 文本的高
color 文本颜色
cursor 鼠标指向变化
4.盒子模型
1、行内元素和块元素
行内元素: 又叫内联元素,只能容纳文本和其他内联元素,<span>,<a>
块元素:块元素一般从新的一行开始,可容纳文本,其他内联元素和块元素。即使内 容不满一行,块元素也要把整行填满。<div>,<p>
2、块元素的特点
每个块级元素都从新的一行开始,并且其后的元素也另起一行。
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
5.列表控制
list-style-type: none; 去掉列表前面的点
square; 正方形
disc; 实心圆
circle 空心圆
decimal 默认数字
decimal-leading-zero; 带0的数字
lower-alpha; 小写字母
upper-alpha; 大写字母
lower-roman; 小写罗马数字
upper-roman; 大写罗马数字
list-style-image: 加入图片
6.布局
margin 外边距
padding 内边距
width 宽度
height 高度
margin-left 左边距
margin-right 上边距
text-align 左右居中
line-height 上下居中
margin10%或者padding10%用来写上下左右的距离 如果单a 只写左边即可:margin-left:10%
7.其他
position:relative 相对定位
position:absolute 绝对定位
大小 border-width:5px;
线条 border-style:dotted; 相当于 border: 5px dotted red;
颜色 border-color:red;
solid 实线 dotted 点状线 dashed 虚线 double 双实线
vertical-align : top 相对上对齐
middle 相对垂直居中
bottom 相对下对齐
8.定位
position:relative; 相对定位 相对于原来的位置
position:fixed; 固定定位 相对于屏幕来说
position: absolute; 绝对定位 脱离文档流
margin: 0 auto; 居中 与position:absolute;不能同时设着
div1和div2 必须设置相同的position
z-index: 设置元素的堆叠顺序
text-align--文字居中
clear:both--清除浮动
display:none;--隐藏
display:block;--显示
overflow:hidden;--隐藏多余的部分 也可以清除浮动
auto;--增加滚动条
scroll;--强制增加滚动条
:hover--事件 (鼠标指向)
.div:hover img{width="10px"}鼠标指向图片放大10px
margin:0 auto; 块元素水平居中
text-align:center;文字水平居中
(height:10px;line-height:10px;)文字垂直居中
list-style-position:inside;把加入的图标放在里面
border-radius:20px 20px 20px 20px ; 圆圈
cursor:pointer 鼠标指向变小手
cursor: not-allowed; 鼠标指向不能使用
opacity:透明度 0到1