一.css
1.css样式引入方式
(1)第一种
head标签中引入
<style>
/* 选择器{css属性名称:属性值;css属性名称:属性值;} */
div{
/* css注释 */
width: 200px;
height: 200px;
background-color: red;
}
</style>
(2)第二种
外部文件引入 工作中常用的
创建一个css文件,stylesheet文件,比如test.css文件
里面写上以下代码
div{
/* css注释 */
width: 200px;
height: 200px;
background-color: red;
}
在想使用这些css样式的html文件的head标签中写上下面的内容
<link rel="stylesheet" href="test.css"> href对应的是文件路径
(3)第三种
内联样式:
<div style="background-color: red;height: 100px;width: 100px;"></div>
2.css选择器
基本选择器
(1)元素选择器
div{width:100px;}
标签名称{css属性:值}
直接在head中写上标签名称
(2)id选择器
html示例代码:
<div id="d1">
</div>
css写法:
#d1{
background-color: green;
width: 100px;
height: 100px;
}
(3)类选择器
html代码:
<div id="d1" class="c1">
李晨浩
</div>
<div id="d2" class="c2">
李海煜
</div>
<div id="d3" class="c1">
张建志
</div>
css写法
.c1{
background-color: green;
width: 100px;
height: 100px;
}
有点个性的选择器
(4)属性选择器
HTML代码
<div id="d1" class="c1" xx="ss">
李晨浩
</div>
<div id="d2" class="c2" xx="kk">
李海煜
</div>
css写法:
[xx]{ 属性查找
background-color: green;
width: 100px;
height: 200px;
}
[xx='ss']{ 属性带属性值查找
background-color: green;
width: 100px;
height: 200px;
}
(5)后代选择器
html代码示例:
<div id="d1" class="c1" xx="ss">
<span>
<a href="http://www.chenhao.com">李晨浩</a>
</span>
</div>
<div id="d2" class="c2" xx="kk">
<a href="http://www.chenhao.com">李海煜</a>
</div>
<div id="d3" class="c1">
张建志
</div>
<a href="http://www.chenhao.com">xxxxxxx</a>
css代码:
div a{
color:orange; /* 字体颜色 */
}
父辈 子辈选择器
(6)组合选择器(逗号连接)
html代码
<div id="d1" class="c1" xx="ss">
<span>
<a href="http://www.chenhao.com">李晨浩</a>
</span>
<span>
<span>xxx222</span>
</span>
</div>
<div id="d2" class="c2" xx="kk">
<a href="http://www.chenhao.com">李海煜</a>
</div>
<div id="d3" class="c1">
<a href="">张建志</a>
</div>
<a href="http://www.chenhao.com">xxxxxxx</a>
<span>官人,你好!</span>
css代码: 注意:a标签字体颜色设置,必须找到a标签才能设置
#d1 a,#d3 a{
background-color: pink;
color:yellow;
}
3.css样式相关
(1)高度宽度
html代码:
<div>
div1
</div>
<span>span1</span>
css写法:
div{
height: 100px;
width: 100px;
background-color: pink;
}
span{
height: 100px;
width: 100px;
background-color: green;
}
width: 50%; 宽度高度可以设置百分比,会按照父级标签的高度宽度来计算
块级标签可以设置高度宽度，即便设置了宽度，还是霸占一整行
内联标签不能设置高度宽度，内联标签的高度宽度由内容的高度宽度来决定
(2)字体
html代码:
<div>
窗前明月光,地上鞋三双!
</div>
css写法:
font-size: 20px; /* 默认字体大小是16px */
color:green; /* 字体颜色 */
/*font-family: '楷体','宋体'; !* 字体格式 *!*/
font-weight: 400; /* 字体粗细 100-900,默认是400 */
(3)字体对齐
html代码:
<div>
只身赴宴鸡毛装!!!
</div>
css代码:
height: 100px;
width: 200px;
background-color: yellow;
text-align: center; 水平居中
/*text-align: right;*/
line-height: 100px; 和height高度相同,标签文本垂直居中
(4)颜色设置
背景,字体颜色都可以
三种方式:
英文单词:red;
十六进制: #ff746d;
rgb: rgb(155, 255, 236);
带透明度的: rgba(255, 0, 0,0.3); 单纯的就是颜色透明度
标签透明度:opacity: 0.3; 0到1的数字,这是整个标签的透明度,百分比也可以
(5)背景
html代码:
<div class="c1">
</div>
css写法:
/*background-color: #ff746d;*/
/*background-color: rgb(155, 255, 236);*/
/*background-image: url("fage.png");*/ url写图片路径,也可以是网络地址路径
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-y;*/
/*background-position: right top;*/
/*background-position: 100px 50px;*/
/* 简写方式 */
background: #ff0000 url("fage.png") no-repeat right bottom;
(6)边框
html代码
<div>
都是同学装鸡毛!
</div>
css写法:
/* 边框简写方式,对四个边框进行设置 */
/*border:1px solid red;*/
/*border-left: 1px solid green;*/
/*border-top: 1px solid blue;*/
border-width: 5px; 边框宽度
border-style: dashed; 边框样式
border-color: aqua; 边框颜色
(7)盒子模型
占用空间大小
margin: 外边距 距离其他标签或者自己父级标签的距离
下面三个表示标签实际占用的空间大小
padding: 内边距 内容和边框之间的距离
border: 边框
content: 内容部分 设置的width和height
(8)内边距
html代码:
<div>
英姿飒爽雄鸡装,飞上枝头变凤凰!
</div>
css写法:
width: 200px;
height: 100px;
border: 4px solid red;
/*padding: 6px 8px;*/
/*padding: 4px 2px 6px 8px;*/
/*padding-left: 20px;*/
/*padding-top: 20px;*/
/*padding-right: 20px;*/
/*padding-bottom: 20px;*/
(9)外边距
html代码:
<div>
英姿飒爽雄鸡装,飞上枝头变凤凰!
</div>
<div class="c1">
<div class="c2">
</div>
</div>
css写法:
.c1{
background-color: red;
height: 100px;
width: 100px;
/*margin-left: -1000px;*/
/*margin: 10px 15px;*/
}
.c2{
background-color: green;
height: 20px;
width: 20px;
/*margin: 10px 15px;*/
margin-left: 20px;
}
(10)display属性
示例:
html代码:
<span>
我是span标签
</span>
<div class="c1">
鹅鹅鹅,曲项向天歌!
</div>
<div class="c2">
拔毛烧开水,铁锅炖大鹅!
</div>
css写法:
span{
/*display: block;*/
}
.c1{
background-color: red;
height: 100px;
width: 100px;
/*display: inline;*/
/*display: inline-block;*/
display: none;
}
.c2{
background-color: green;
height: 100px;
width: 100px;
}
display的几个值:
inline: 将块级标签变成了内联标签
block:将内联标签变成块级标签
inline-block: 同时具备内联标签和块级标签的属性,也就是不独占一行,但是可以设置高度宽度
none: 设置标签隐藏
(11)浮动(float)
浮动的元素,不独占一行,并且可以设置高度宽度
html代码
<div class="cc">
<!--<div>吟诗作对</div>-->
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3"></div>
css样式
body{
margin: 0;
}
.c1{
background-color: red;
height: 100px;
width: 200px;
float: left;
}
.c2{
background-color: brown;
height: 100px;
width: 200px;
float: right;
}
.c3{
background-color: pink;
height: 100px;
width: 100%;
}
浮动会造成父级标签塌陷的问题,没有高度了
解决父级标签塌陷的问题:
方式1:
给父级标签加高度
方式2:
清除浮动:clear属性
方式3: 常用
.clearfix:after{
content: '';
display: block;
clear: both;
}
html代码:
<div class="cc clearfix">
<!--<div>吟诗作对</div>-->
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3"></div>
方式4：
css代码：overflow: hidden;
.c1{
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.c2{
height: 100px;
width: 100px;
background-color: green;
float: right;
}
.c3{
background-color: yellow;
height: 200px;
}
.cc{
overflow: hidden;
}
html代码：
<div class="cc">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="c3"></div>