css基础
什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
css 层叠样式表
如一个div元素可以添加多个样式，一个样式可以重复添加在一个元素上，以优先级最高|最近的为主
css 的使用方式；
1.行内样式表：在标签上添加一个style属性，属性值添加样式
值在当前行有效
2.内部样式表：head标签中添加style标签对，标签对中定义css样式
1)选择器{
样式；
样式；
...
}
2)选择器：选中某一个|某些元素
3)样式：属性名：属性值；
3.外部样式表：在外部定义css文件，html的head中使用link标签进行引入
如:<link rel="stylesheet" href="css/first.css">
优先级：谁离元素近，就优先显示谁
css选择器
基础选择器，关系选择器，属性选择器[]，伪类:，伪元素::...
掌握基础选择器：重点
#id选择器： 根据元素的id属性选中某个元素
.class： 根据元素的class属性值选中一组元素，可以添加多个元素名，选择其一即可
元素选择器： 根据元素名选择一组元素
* -- 通配符： 选中当前中的所有元素（常用来清除浏览器的默认样式）
/*清除浏览器的默认样式，如p标签的内外边距等*/
*{
padding:0;
margin:0;
}
基础选择器的优先级：
id>class>元素>*
群组选择器：
选择器1，选择器2，选择器3...{样式}
同时选中以上不同选择器作用到的元素设置样式
后代选择器：
父集元素 空格 子集元素{样式}
伪类选择器：
:hover 当鼠标悬停在内容上时，显示出不同的样式
:nth-child
<style>
/*清除浏览器的默认样式，如p标签的内外边距等*/
*{
padding:0;
margin:0;
}
/*id选择器*/
#div1{
color:goldenrod;
}
/*元素选择器*/
p{
color:cyan;
}
/*class选择器*/
.background{
background:wheat;
}
.haha{
font-size:18px;
}
/*群组选择器*/
#div1,.background,span{
border:1px solid blue;
}
/*后代选择器*/
ul li{
background:red;
}
#box{
width:200px;
height:200px;
background:red;
border-radius:100%;/*圆*/
}
/*伪类选择器有很多，这是其一*/
#box:hover{
background:yellow;
}
/*伪类*/
.li1:first-child{
color:palevioletred;
}
.li1:last-child{
color:green;
}
div:nth-child(2){
background:skyblue;
}
div:nth-child(odd){/*奇数，加粗*/
font-weight:bold;
}
div:nth-child(even){/*偶数，斜体*/
font-style:italic;
}
</style>
使用：
<div id="div1">我是div1</div>hi
<div class="background">我是div2</div>
<div>我是div3</div>
<p class="background haha">我是p1</p>
<p>我是p2</p>
<span>我是span</span>
<ul>
<li>ul1</li>
<li>ul2</li>
<li>ul3</li>
</ul>
<ol>
<li class="li1">ol1</li>
<li>ol2</li>
<li>ol3</li>
</ol>
<article>aaa</article>
<div id="box"></div>
css一些基本样式
1.背景样式
2.文本样式
3.列表样式
4.盒子模型
5.浮动
6.定位
......
文本的常用样式
字体大小 font-size
字体颜色 font-color
字体样式 font-style
字体选择 font-family
text-align: 在一个元素内部的内容在元素范围中水平对齐方式
行内元素无效
line-height: 当前元素中的内容(文本|行内)每一行都是line-height设置的高度，
在这一行中内容是垂直居中的
如：
<style>
.div{
heiht:50px;
background:cyan;
color:#fff;/*字体颜色*/
font-size:30px;/*字体大小*/
font-family:"黑体","宋体";/*字体选择，可退而求其次*/
font-style:italic;/*斜体*/
font-weight:700;/*加粗*/
text-align:center;/*文本竖屏居中*/
line-height:50px;
}
</style>
背景样式
background-color
background-image
背景不能撑起元素大小，所以要设置高度
background-repeat
background-size
background-position
background:背景复合属性
background:背景颜色 背景图片 是否平铺，位置；
列表：
List-style:none; 去除列表项标记
display: 修改元素特性
inline 行内元素
block 块元素
inline-block 行内块 具有行内和块元素的特点 能设置宽高 宽高有自己撑起，和其他行内元素一行显示
栗子：
<style>
#box{
height:200px;
border:5px;
background-color:darkred;
background-image:url('');
background-repeat:no-repeat;/*默认平铺*/
/*background-repeat: repeat-x; /*x轴平铺，也可以y轴平铺*/
background-size:100px;/*默认宽度*/
background-size:100px 200px;/*宽，高*/
back-position:center;/*x轴居中 y轴居中*/
back-position:bottom;
back-position:right top;
background:rosybrown url("");
background-size:300px;
}
ul{
list-style:none;
}
ul a{
text-decoration:none;/*去除下划线*/
color:#000;
}
ul li{
display:inline-block;/*行内块*/
}
</style>
盒子模型
页面中的每一个元素其实符合盒子模型的概念
内容 + 内边距padding + 边框border + 外边距margin
内容显示在宽高大小中，内边距不显示内容
内容：设置宽高都是内容的大小
padding：为元素设置背景样式默认延伸到内边距上
内外边距设置值的方式：
1个值 四个边相同
2个值 上下 左右
3个值 上 右 下 与右边相同
4个值 上 右 下 左
padding-left/top/bottom/right
border: 三元素
border: 大小 样式 颜色； border:1px solid red;
如：
<style>
.box{
width:200px;
height:200px;/*四边都是200px*/
padding:50px;
border:10px solid gray;/*transparent设置成透明*/
margin:80px;
background:hotpink;
border-top:10px solid palegreen;
border-right:10px dotted dodgerblue;
border-bottom:10px dashed yellow;
border-left:10px double gray;
margin :0 auto;
}
</style>
定位：position
absolute 绝对定位
子父集定位：如果父级身上有设置position:relative,那就相对于父集定位
相对窗体定位：如果父集身上没有position:relative，那相对于窗体绝对定位
fixed 固定定位
相对于窗体定位一个位置，永远不改变
如：
<style>
#box{
width:800px;
height:1000px;
background:#000;
margin-left:100px;
position:relative;/*相对定位*/
}
#item{
width:200px;
height:200px;
background:red;
/*
margin:0 auto;
margin-left:100px;
*/
position:absolute;/*相对父集的定位*/
top:20px;
left:50px;
}
p{
margin:0;
width:100px;
height:150px;
background:navajowhite;
position:fixed;/*固定位置*/
right:0;
bottom:0;
}
</style>
<div id="box">
<div id="item">
</div>
</div>
<p><a href="#box">回到顶部</a></p>