css 有三种形式的写法：
- 直接在标签里写入style样式
- 在<head></head>里写入<style></style>样式
- 直接创建.css 文件通过<link/>引入css文件
<html><head> ???<title></title> ???<link rel="stylesheet" href="css文件名.css"/> ?<!--把创建的css文件中所有的样式都引用到了本文件--> ???<style><!--cc为名字，. 代表class-->
???????.cc{ ????????????????color:red; ???????????font-size:18px; ???????} ???????.ccd{ ???????????color:#ddd; ???????????} ???</style></head><body> <div id="122" style="color:red;font-size:15px;"> 第一种 </div> <div class="cc ccd"> 第二种 </div> ?<!--优先级：当同时引用两个样式时class=“cc ccd”，style里越往后优先级越高--> <div class="bb">第三种</div></body></html>选择器 :
- 标签选择器
- 把HTML中‘所有’的a标签应用此样式
a{ ?????color:red;}2. 把input类中type=“text”的标签都应用这个样式
input[type="text"]{ ???background-color:black; ???color:white;}- ID选择器
例：id 是uu的标签应用这个样式
<div id="uu"> 我是谁我在哪儿 ？.？ </div>
#uu{ ???background-color:black; ???color:white;}- 层级选择器
例:
<div class=‘c‘>
<a>
<div>
<span class=‘d‘></span>
</div>
<span class = ‘d‘></span>
</a>
</div>
<span class=‘d‘></span>
.c a div .d{ ???此样式只应用于c样式的标签下的a标签下的div标签下的标签的d样式 ???(若省略div则是a标签下的所有d样式都被应用) ???若a标签中有id=i8，则此处的css样式中的a可写为#i8}- 组合选择器
例 : 如下a样式和p样式可写为组合样式a,p{ }
a{}p{}a,p{ ???a标签或p标签都可以应用这个样式 ???也可以和层级选择器一起应用}<!--background-->
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-image：url("图片路径") | 如果没有指定图片宽度，图片默认会平铺；如果指定的高度大于图片高度，图片也会默认向下平铺 |
| background-repeat | repeat-x;不允许在x轴重复，repeat-y;不允许在y轴重复,no-repeat;不允许重复 |
| background-position：0px 119px; | 如望远镜，随着望远镜的移动看见的景物也不同 |
<!--border-->
线的粗细 实线虚线 线的颜色
<div style="border: 5px dotted #3D3127;"></div> dotted:虚线 solid : 实线
border-left:左边框 ?border-right：右边框 ?border-top:上边框 border-bottom：下边框
<!--display-->
参数：
| none | 隐藏标签 |
| block | 把块级标签变为内联标签 |
| inline | 把内联标签变为块级标签 |
<!--cursor-->
参数：
| pointer | 鼠标移动到标签变为小手 |
| move | 鼠标移动到标签变为十字拉拽 |
| url(‘图片路径‘) | 鼠标移动到标签变为图片 |
<!--float-->
float: left; right; 在层级标签中一旦子类标签被设置为float，则父标签将不会被撑起来了
解决方法一：
<html> ???<head> ???????????<title> </title> ???</head> ???<body> ???????<div style=‘background-color:blue‘> ??? <div style=‘background-color:red;float:left;width:20%;‘>123</div> ??? <div style=‘background-color:green;float:left;width:50%;‘>123</div> ?? <!----width 的百分比是相对于父标签进行划分的---------> ?????? <div style=‘background-color:green;float:right;width:10%;‘>123</div> ?? <div style=‘clear:both;‘>这里可以什么都不写，但是必须有，
相当于把飘起来的标签拉回来了,父标签里的background才会在剩下的20%显现出来 ???</div> ??? </div> ???</body></html> ???????
解决方法二：利用after，before伪类给内容前后插入数据
<html> ???<head> ???????<title> </title> ???????<style> ???????????.c1{ ???????????????float:left; ???????????????width:20%; ???????????????background-color:red; ??????????? } ???????????.c2{ ???????????????float:right; ???????????????width:50%; ???????????????background-color:green; ????????? ?} ???????????.clearfix:after{ ??????????????????content:‘.‘; ???????????????clear:both; ???????????????????visibility:hidden; ??<!-- 把内容‘ . ’隐藏 --> ???????????} ???????</style> ???</head> ???<body> ???????<div class=‘clearfix‘ style=‘background-color:#45e8e7;‘> ???????????<div class = ‘c1‘>342</div> ???????????<div class = ‘c2‘>33422</div> ???????</div> ???</body></html> ???<!--position-->
参数：
| fixed | 固定位置 | 定位在窗口的某一位置，fixed-top 离‘窗口‘顶部距离; fixed-left 离左边距离; fixed-bottom 离下面的距离; fixed-right 离右边的距离 |
| absolute | 绝对位置 | 一次固定在窗口的指定位置和relative合用 |
| relative | 相对位置 | 本身不产生任何效果，和absolute合用 |
小例子:
<html> ???<head> ???????<title> </title> ???</head> ???<body> ???????<div style=‘height:2000px;background-color:pink‘> ???????????????<div style=‘position:relative;background-color:#aeafee;height:300px;width:300px;float:left;‘> ???????????????????<div style=‘position:absolute;bottom:0px;right:0px;‘>定位</div> ???<!-- ‘定位’定位在了blue框里的右下角 ?--> ???????</div> ???????<div style=‘position:fixed;bottom:50px;right:50px;‘>返回顶部</div><!--‘返回顶部‘定位在’窗口‘的右下角--> ???????</div> ???</body></html> ???
<!--透明度:opacity-->
透明度可设置范围为：0-1，注：ie浏览器设置透明度用filter:alpha(opacity=sqlN)，其中sqIN设置范围：0-100
小例子：通过fixed固定设置两层div（注： <!-- z-index：层级数，数字越大层越上-->）
<html> ???<head> ???????<title> </title> ???????<style> ???????????.c{ ???????????????z-index:10; ??????????????????????position:fixed; ???????????????top:0px; ???????????????left:0px; ???????????????bottom:0px; ???????????????right:0px; ???????????????background-color:black; ???????????????color:white; ???????????} ???????????.c1{ ???????????????z-index:12; ???????????????position:fixed; ???????????????top:0px; ???????????????left:0px; ???????????????bottom:0px; ???????????????right:0px; ???????????????background-color:red; ???????????????color:white; ???????????????opacity:0.3; ???????????} ???????</style> ???</head> ???<body> ???????<div class=‘c‘>ihbk</div> ???????????<div class=‘c1‘>sfadsdfds</div> ???????</body></html> ???<!--边距padding-->
padding ： 内边距 // margin：外边距
padding: padding-left:左边距; padding-right:右边距; padding-bottom: 下边距; padding-top: 上边距;
margin: margin-left:左边距; margin-right:右边距; margin-bottom: 下边距; margin-top: 上边距;
padding参数设置的三种方式：
- padding：20px; 把上下左右边距都设置为20px;
- padding:10px 20px; 把上下边距设置为10px; 左右边距设置为20px;
- padding:10px 20px 30px 40px; 把上边距设置为10px; 把左边距设置为20px; 把下边距设置为30px; 把右边距设置为40px;
小例子：
<html> ???<head> ???????<title> </title> ???????<style> ???????????.c{ ???????????????height:70px; ???????????????border:1px solid red; ???????????} ???????????.c1{ ???????????????height:50px; ???????????????background-color:pink; ???????????????margin-top:10px; ???????????} ???????</style> ???</head> ???<body> ???????<div class=‘c‘> ???????????<div class=‘c1‘> ihbk </div> ???????????</div> ???????</body></html> ???html_之css
原文地址：https://www.cnblogs.com/Vera-y/p/10439922.html