CSS个人总结笔记（收藏吧）
<h1 style=" width:300px;"> </h1>
内部样式要写在<head></head>标签之间
<style type=" text/css"> 样式</style>
<link href=" 样式表位置" rel=" stylesheet" type=" text/css">
link这个也要放在<head></head>之间
第一种：
<style type=" text/css">
@import " 直接写css文件路径"
</style>
第二种：
<style type=" text/css">
@import url(写样式表文件路径)
</style>
一、选择器
1.派生选择器
例如：(选择div里面的span)
div span{给样式}
<div>
<span>哈哈哈</span>
</div>
2.还有
列如：(p和a 都选择)
p,a{给样式}
<p>你好1</p>
<a>你好</a>
二、
背景颜色：
background-color: #ccc;
background意思是背景
color 意思是颜色
背景图片：
background-image: url(写图片路径);
background-repeat: repeat-y;
repeat 意思是重复平铺
repeat-y 意思是按y轴平铺
repeat-x 意思是按x轴平铺
background-repeat:no-repeat 意思是不平铺
background-position(设置背景图像在网页上的位置。)
background-position：center;(意思是定位图片的位置)
1.center（居中）
2.top （上）
3.right (右)
4.left (左)
5.bottom (下)
background-position:50% 50%;(这种方法也可以使背景图片居中)
background-attachment:fixed(使背景固定不随滚动条走)
fixed(意思是固定的)
attachment(意思是附在那里的意思)
background-size (规定背景图片的尺寸是css3的)
size 意思是尺寸
属性： 1.contain
(把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 )
意思就是按等比例缩放填满区域
2.cover(铺满区域)
3.percentage(以父元素的百分比来设置背景图像的宽度和高度)
注意：如果只设置一个值，则第二个值会被设置为 "auto"。
CSS个人总结笔记（收藏吧）
三、字体
这里要注意引号嵌套时外层要用双引号内层要用单引号
font-family:"微软雅黑","字体二","字体三"........;(定义字体)
定义多个字体的好处就是系统会默认从第一个字体开始找，如果系统没有这个字体则默认使用浏览器设定的字体
font-style:normal;(定义字体如何显示)
normal(是正常显示)
italic(文本倾斜显示)
font-weight：900； （设置文本的粗细）
weight(意思是重量的意思)
默认值：normal 等于400
还可以设置为 bold 等同于700
注意：设置文本粗细的值为： 100 ~ 900 为字体指定了 9 级加粗度
font-size:50px;(设置文字的大小)
单位有：px em
1em=16像素
2em 等于当前字体尺寸的两倍。
四、文本
text-indent:;
text(文本)
indent(缩进)
单位：em
px
注意：
可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：
text-align (用于文本的对齐)
align(意思是排列)
后面的属性有：1.left(左对齐)
2.right(右对齐)
3.center（居中）
4.justify(像word文档里面的两端对齐)
word-spacing(设置改变字（单词）之间的标准间隔)
spacing(间隔)
单位： em
px
使用这个无论是词语还是文字都必须有空格才能实现效果。
列如：
(你好 欢迎你来到 我的工作室。)
text-decoration(一般使用于去掉下划线)
decoration(装饰的意思)
属性：1.none 去掉下划线
2.underline (添加下划线)
3.overline (添加上面划线)
4.line-through (穿过一条线，一般多用于打折的价格划一条线)
5.blink (闪烁的)
line-height(用于设置行高)
letter-spacing 字母间隔
五、a标签的一个样式
a:hover (鼠标指针位于链接的上方)
用法：<style>
a:hover{
font-size：20px;
</style>
当鼠标滑上去的时候字体变大20px。
六、列表
列表样式：
如何去掉无序列表前面的小圆点：
list-style:none;
七、表格：
table, th, td
border: 1px solid blue;
border：边界 边框
1px 定义边框的粗细
solid 定义实线
blue 定义颜色
border-collapse:collapse;(将边框折叠为单一边框)
border-spacing:50px;(将格与格之间的间距拉开，
但是是边框线没有合并的情况下才能生效)
八、行内元素转换为块元素
display:block;
block 使其转化为块元素
inline 使其转化为行内元素
九、外边距与内边距
内边距：
padding-top (上)
padding-right (右)
padding-bottom (下)
padding-left (左)
外边距：
margin-top (上)
margin-right (右)
margin-bottom (下)
margin-left (左)
注意：与其到底是使用外边距还是内边距依据谁对谁而定！！
十、相对定位：(相对定位虽然元素离开原来的位置，但是不释放原来的空间)
position: relative;
left: 30px;
top: 20px;
十一、绝对定位：(绝对定位元素离开，并且释放原来的空间)
position: absolute;
left: 30px;
top: 20px;
为了浏览器适应，所以使用绝对居中时上面一定要写一个相对定位作为参照。
十二、overflow：溢出部分的处理
scroll(卷帘) 出现滚动条
hidden 隐藏
auto 自动出现滚动条
伪类选择器：
#a ul li:first-child{
margin-left:0px;
first-child(第一个孩子的意思)
以上这段代码便是找到类a里面的ul 里面的Li 将第一个li标签的外左间距去掉。
last-child(最后一个)
#a ul li:nth-child(1){
括号里面是几选择的就是第几个
如果说三的倍数就是写 3N
十三、CSS样式的权重问题：
ID>Class>标签本身(属性选择器)
十四、相对定位绝对定位的理解：
绝对定位：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据body对象左上角作为参考进行定位。
相对定位(relative)：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。
且不释放原来的位置。依据当前位置进行定位。
十五、边边阴影：
box-shadow(给边框阴影)
div
box-shadow: 10px 10px 5px #888888;
阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色
给边框切圆角：
border-radius:4px;
注意这里面的值取偶不取奇
相关属性： border-top-right-radius ,
border-bottom-right-radius ,
border-bottom-left-radius ,
border-top-left-radius
文本溢出时显示为省略号（..........）
text-overflow ：ellipsis
resize:none;
十六、input点击以后蓝色边框的去除：
outline:none; 去除input的蓝色的那个线
十七、 ul ol dl 默认都有一个外边距：
给他们所有的margin:0;padding:0;
如果您觉得本文的内容对您的学习有所帮助：
关键字：
CSS