称为层叠样式表
CSS 样式引入方式
第一种
head 标签中引入
- <style>
- /* 选择器{CSS 属性名称: 属性值; CSS 属性名称: 属性值;} */
- div{
- /* CSS 注释 */
- width: 200px;
- height: 200px;
- background-color: red;
- }
- </style>
第二种方式
外部文件引入 工作中常用的
创建一个 CSS 文件, stylesheet 文件, 比如 test.CSS 文件
里面写上以下代码
- div{
- /* CSS 注释 */
- width: 200px;
- height: 200px;
- background-color: red;
- }
在想使用这些 CSS 样式的 html 文件的 head 标签中写上下面的内容
<link rel="stylesheet" href="test.css"> href 对应的是文件路径
第三种引入方式
内联样式:
<div style="background-color: red;height: 100px;width: 100px;"></div>
CSS 选择器
基本选择器
元素选择器
- div{
- width:100px;
- }
标签名称{CSS 属性: 值}
id 选择器
HTML 示例代码:
- <div id="d1">
- </div>
CSS 写法:
- #d1{
- background-color: green;
- width: 100px;
- height: 100px;
- }
类选择器
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;
- }
属性选择器
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; }
后代选择器
HTML 代码示例:
<div id="d1" class="c1" xx="ss"> <span> <a href="http://www.zhoushen.com">洲神</a> </span> </div> <div id="d2" class="c2" xx="kk"> <a href="http://www.zhoushen.com">神州</a> </div> <div id="d3" class="c1"> xxx </div> <a href="http://www.xxx.com">xxxxxxx</a>
CSS 代码:
div a{ color:orange; /* 字体颜色 */ }
组合选择器 (逗号连接)
HTML 代码
<div id="d1" class="c1" xx="ss"> <span> <a href="http://www.zhoushen.com">洲神</a> </span> <span> <span>xxx222</span> </span> </div> <div id="d2" class="c2" xx="kk"> <a href="http://www.zhoushen.com">神州</a> </div> <div id="d3" class="c1"> <a href="">嘻嘻嘻</a> </div> <a href="http://www.zhoushen.com">xxxxxxx</a> <span > 你好!</span>
CSS 代码: 注意: a 标签字体颜色设置, 必须找到 a 标签才能设置
#d1 a,#d3 a{ background-color: pink; color:yellow; }
CSS 样式相关
高度宽度
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%; 宽度高度可以设置百分比, 会按照父级标签的高度宽度来计算
字体相关
HTML 代码:
<div>
窗前明月光, 地上鞋三双!
</div>
CSS 写法:
font-size: 20px; /* 默认字体大小是 16px */ color:green; /* 字体颜色 */ /*font-family: '楷体','宋体'; !* 字体格式 *!*/ font-weight: 400; /* 字体粗细 100-900, 默认是 400 */
字体对齐
HTML 代码:
<div>
只身赴宴鸡毛装!!!
</div>
CSS 代码:
height: 100px; width: 200px; background-color: yellow;
text-align: center; 水平居中
/*text-align: right;*/
line-height: 100px; 和 height 高度相同, 标签文本垂直居中
颜色设置
(背景, 字体颜色都行)
三种方式:
英文单词: red;
十六进制: #ff746d;
rgb: rgb(155, 255, 236);
带透明度的: rgba(255, 0, 0,0.3); 单纯的就是颜色透明度
标签透明度: opacity: 0.3; 0 到 1 的数字, 这是整个标签的透明度
背景
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;
边框
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; 边框颜色
盒子模型
占用空间大小
margin: 外边距 距离其他标签或者自己父级标签的距离
padding: 内边距 内容和边框之间的距离
border: 边框
content: 内容部分 设置的 width 和 height
内边距
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;*/
外边距
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; }
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: 设置标签隐藏
浮动
浮动的元素, 不独占一行, 并且可以设置高度宽度
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:
给父级标签加高度 .cc
.cc{ hegiht:100px }
方式 2:
清除浮动: clear 属性
.c3{ clear: both; }
表示浮动的标签不能覆盖我, 就是在我身上, 这样会把浮动的标签挤到头上
方式 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>
伪元素选择器
就是 div 标签后面加一些东西
![FE6PJ2X85RJ5FW2I91(WI3](C:/Users/Administrator/Desktop / 博客园照片 / FE6PJ2X85RJ5FW2I91(WI3.PNG)
HTML 代码:
<div>
吟诗作对!
</div>
CSS 写法
div{ background-color: pink; height: 100px; width: 200px; } div:after{ content: '?'; color:white; }
伪类选择器
hover 和 pointer(悬浮上就是一个小手的标志)
HTML 代码
<div class="c1"> </div>
CSS 写法
.c1{ background-color: red; height: 300px; width: 300px; }
意思是悬浮就是产生 hover 中的效果
.c1:hover{ /*background-color: green;*/ background-image: url("111.png"); cursor: pointer; (悬浮之后就是将鼠标变成一个小手的标志) }
其他伪类选择器
/* a 标签未访问的时候设置效果 */ a:link{ color:yellow; } /* 鼠标悬浮上去时设置效果 */ a:hover{ color:black; } /* 鼠标左键点击下去的还没有抬起来的时候, 设置效果 */ a:active{ color:green; } /* 鼠标抬起后, 访问过之后设置效果 */ a:visited{ color:purple; }
文字装饰
a{
text-decoration: none; 去除下划线
}
定位 positon
static 静态定位, 也就是标签默认
relative: 相对定位, 按照自己原来的位置进行移动
absolute: 绝对定位, 按照父级标签或者祖先辈儿标签设置了相对定位的标签位置进行移动, 如果没有找到相对定位标签, 会找到整个文档的位置进行移动
fixed: 固定定位, 按照浏览器窗口的位置进行移动
示例:
HTML 代码
<div class="cc"> <div class="c1"></div> <div class="c2"></div> </div> <div class="c3"></div>
CSS 写法:
body{ margin: 0; } .c1{ background-color: red; height: 100px; width:100px; } .c2{ background-color: green; height: 100px; width:100px; /*position: relative; !* 相对定位 *!*/ /*left:100px;*/ /*top:-100px;*/ /*bottom:*/ /*right:*/ position: absolute; top: 20px; left: 80px; } .c3{ background-color: purple; height: 100px; width:200px; } .cc{ margin-top: 200px; position: relative; }
固定定位示例:
<!DOCTYPE HTML> <HTML lang="en"> <head> <meta charset="UTF-8"> <title> Title </title> <style> body{ margin: 0; } .c1{ background-color: red; height: 1000px; width: 800px; } .c2{ background-color: green; height: 1000px; width: 800px; } .c3{ background-color: blue; height: 1000px; width: 800px; } .s1{ position: fixed; left: 40px; bottom: 20px; height: 40px; width: 60px; background-color: aqua; line-height: 40px; text-align: center; } .s1 a{ color:white; text-decoration: none; font-size: 12px; } </style> </head> <body> <div id="top"> 这是顶部 </div> <div class="c1"> </div> <div class="c2"> </div> <div class="c3"> </div> <span class="s1"> <a href=""> 返回顶部 </a> </span> </body> </HTML>
选择器优先级
HTML 代码:
<div class="c1">
这是 c1 的直属文本
<div id="d1" class="c2"> <!--<span class="c3" id="d3" style="color:black;">--> <span class="c3 c4">
这是 c1 的儿子 c2 标签的文本
</span> </div> </div>
CSS 代码
div{ color:red; } /* CSS 属性有继承的概念 权重 0*/ /* 标签 (元素) 选择器 权重 1*/ /* 类选择器 权重 10*/ /* id 选择器 权重 100*/ /* 内联样式 权重 1000*/ /* color:green!important; 无敌! */ /* 如果优先级相同, 按照后面的为准 */
别忘了, class 属性的值可以写多个
/*#d3{*/ /*color:yellow;*/ /*}*/ .c3{ color:blue; } /*span{*/ /*color:green!important;*/ /*}*/ .c4{ color:yellow; } CSS
来源: http://www.bubuko.com/infodetail-3398444.html