css学习笔记
css学习笔记
CSS的导入方式
- 行内样式
- 内部样式
- 外部样式
在多个样式同时对一个元素进行样式设置时，遵循“就近原则”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入方式</title>
<!-- 外部样式,链接式 链接css文件-->
<link rel="stylesheet" href="css/style.css">
<!-- 外部样式 导入式，不推荐使用-->
<style>@import "css/style.css";</style>
<!-- 内部样式-->
<style>
/*style标签内只能是css代码，注释样式为“/* * /”*/
h1{
color: green;
}
</style>
</head>
<body>
<!--行内样式，在标签元素中，添加style属性，参数中直接写声明句-->
<h1 style="color: red">h1</h1>
</body>
</html>
选择器
-
基本选择器
-
- 标签选择器：选择页面中所有该标签元素：标签名{}
- 类选择器：选择页面中所有该类元素：.类名{}
- id选择器：选择页面中id对应的元素：#id{}
<title>选择器</title>
<style>
/*标签选择器:会选择页面上该标签的所以元素*/
h1 {
color: green;
}
/*类选择器的格式：.class的名字{}*/
.a{
color: red;
}
/* id选择器：#ID名称{} 全局id必须唯一*/
#h{
font-size: 100px;
}
</style>
2.层次选择器
- 后代选择器: 1 2{}会选择1内所有的元素
- 子选择器: 1>2{}会选择1下所有2（只能一代）
- 相邻兄弟选择器 ：1+2{}选择！紧跟！1的所有2元素（1可能是多个，每个1最多只能选择一个2）
- 通用兄弟选择器：1~2{}选择1后面所有兄弟关系的2元素
/*后代选择器： 在莫歌元素的后面 祖爷爷 爷爷 爸爸 你*/
/*body p{
background: #66ccff;
}*/
/*子选择器： 一代，儿子*/
/* body>p{
background: #66ccff;
}*/
/*相邻兄弟选择器: 只有一个，相邻（向下）*/
/*.active+p{
background: red;
}*/
/*通用选择器: 选中元素的向下所有的兄弟元素*/
/*.active~p{
background: green;
}*/
3.****结构伪类选择器
/*ul的第一个子元素*/
ul li:first-child{
background: red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: #66ccff;
}
/*
选中p1：定位到父元素，选择当前的一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
*/
p:nth-child(2){
background: green;
}
/*选中父元素，下的p元素的第二个*/
p:nth-of-type(2){
background: yellow;
}
4.属性选择器
/* 属性名， 属性名 = 属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个为开头
$= 以这个结尾
/*存在id属性的元素 a[]{}*/
/* a[id]{*/
/* background: green;*/
/* }*/
/* a[id=first]{*/
/* background: red;*/
/* }*/
/*class中有links的元素*/
/*a[class*="links"]{*/
/* background: yellow;*/
/*}*/
/*选中href中意http开头的元素*/
/*a[href^=http]{*/
/* background: yellow;*/
/*}*/
/*a[href$=pdf]{*/
/* background: green;*/
/*}*/
美化网页元素
字体式样
font-family： 字体
font-size: 字体大小
font-weight: 字体粗细
color： 字体颜色
文本式样
<!--颜色：
单词
RGB 0~F
RGBA A:0~1
text-align ：排版，居中
text-indent：2em ；段落首行缩进
height: 300px;
line-height: 300px;
行高，和块的高度一致，就可以上下居中
-->
<style>
h1{
color: rgba(0,255,255,0.8);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: yellow;
height: 300px;
line-height: 300px;
}
/*下划线*/
.l1{
text-decoration: underline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*上划线*/
.l3{
text-decoration: overline;
}
/*超连接去下划线*/
a{
text-decoration: none;
}
超连接伪类
/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮*/
a:hover{
color: orange;
font-size: 50px;
}
a:active{
color: green;
}
/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
text-shadow: #000000 5px -5px 2px;
}
列表
list-style: none：
列表的点 none：去除 circle：空心圆 decimal：数字123. square正方形
背景
div{
width: 100px;
height: 700px;
border: 1px solid red;
/*设置背景：默认为平铺*/
background: image("image/a.jpg");
/*横向平铺和纵向平铺不平铺*/
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
}
盒子模型
- margin：外边距
- padding：内边距
- border：边框
边框
border：粗细 样式 颜色
- 边框的粗细
- 边框的样式
- 边框的颜色
外边距----居中
margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下
margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
margin:0 auto /*auto表示左右自动*/
margin:4px/*表示上、右、下、左都为4px*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/
常见初始化
margin:0;
padding:0;
text-decoration:none;
圆角边框
border-radius有四个参数（顺时针），左上开始
圆圈：圆角=半径
盒子阴影
div{
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow: 10px 10px 100px yellow;
}
浮动
- 块级元素：独占一行 h1~h6 p div 列表…
- 行内元素：不独占行 span a img strong…
- 行内元素可以被包含在块级元素中，反之则不可以
display
- block：块元素
- inline：行内元素
- inline-block：是块元素，但是可以内联，在一行
- none：消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联 ，在一行
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
overflow及父级边框塌陷问题
clear：
right：右侧不允许有浮动元素
left：左侧不允许有浮动元素
both：两侧不允许有浮动元素
解决塌陷问题方案：
方案一：增加父级元素的高度； 简单、代码尽量避免空div
方案二：增加一个空的div标签，清除浮动； 简单，元素假设没有了固定的高度，就会超出
<div class = "clear"></div>
<style>
.clear{
clear:both;
margin:0;
padding:0;
}
</style>
方案三：在父级元素中增加一个overflow：hidden； 简单，下拉的一些场景避免使用
overflow:hidden/*隐藏*/
overflow：scoll/*滚动*/
方案四：父类添加一个伪类:after；写法稍微复杂，但是没有副作用，推荐使用
#father:after{
content:'';
display:block;
clear:both;
}
定位
相对定位
相对定位：positon：relstive；
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留
top:-20px;
left:20px;
bottom:-10px;
right:20px;
绝对定位-absolute
定位：基于xxx定位，上下左右~
相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
div{
position: absolute;
right: 100px;
}
固定定位-fixed
相对于窗口定位
div{
/*固定定位fixed*/
position: fixed;
bottom: 300px;
left: 50px;
}
z-index
图层堆叠
div{
/*设置图层，默认是0，在最底层*/
z-index: 10;
/*设置透明度 此下两句等价*/
opacity: 0.5;
filter: alpha(opacity=50);
}
