- 学习王者,看大仙
- 时间:2099-01-01
- 地点:虎牙618
CSS---学习笔记
HTML + CSS + JS （结构 + 表现 + 交互）
CSS（Cascading Style Sheet）层叠级联样式表：表现（美化网页）
基本入门:
Title
我是标题
最好使用如下规范：
CSS的优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分的丰富
- 建议使用独立于HTML的CSS文件
- 利用SEO，容易被搜索引擎记录
CSS的三种导入方式：行内样式、内部样式、外部样式
优先级：就近原则，那种样式离元素更近谁的优先级更高
拓展：外部样式两种写法
- 链接式
- 导入式：@import是CSS2.1特有的
选择器
作用：选择页面上的某一个或者某一类元素
基本选择器
- 标签选择器：选择一类标签
Title java
hzx
- 类选择器：选择所有class属性一致的标签，跨标签.类名{}
Title 标题1
标题2
标题3
- ID选择器:全局唯一！#id名{}
Title 标题1
标题2
标题3
标题4
标题5
选择器优先级:不遵循就近原则,id选择器>class选择器>标签选择器
层次选择器
1、后代选择器：在某个元素后面
/* 后代选择器 */
body p{
background: green;
}2、子选择器：一代
/* 子选择器 */
body>p{
background: green;
}3、相邻兄弟选择器：同辈
/* 相邻兄弟选择器 :只有一个,相邻（向下） */
.active + p{
background: green;
}4、通用选择器
/* 通用选择器:当前选中元素向下的所有兄弟元素 */
.active~p{
background: green;
}
Title
p1
p2
p3
-
p4
-
p5
-
p6
结构伪类选择器
伪类：条件
/*ul的第一个子元素*/
ul li:first-child{
background: wheat;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: aqua;
}
/*选中 p1:定位到父元素,选择当前第一个元素
p:nth-child(2)选择当前P元素的父级元素,选择父级元素的第一个,并且是当前元素才生效
*/
p:nth-child(2){
background: green;
}
/*选中父元素,下的p元素的第二个类型*/
p:nth-of-type(2){
background: yellow;
}
Title
h1
p1
p2
p3
-
li1
-
li2
-
li3
属性选择器（常用较好）
Title
/*属性选择器格式:a[]{}
属性名 = 属性值(正则)
= 绝对等于
*= 通配 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
有很多 这就是正则表达式的通配符美化网页元素
为什么要美化网页：
- 有效的传递页面信息
- 美化网页，页面漂亮才能吸引用户
- 凸显页面主题
- 提高用户的体验
span标签：重点要突出的字，使用span标签套起来
Title
欢迎学习Java
字体样式：
Title
人物介绍
hzx
zs
文本样式：
1、颜色：color rgb rgba
2、文本对齐的方式：text-align=center
3、首行缩进：text-indent：2em;
4、行高：line-height；单行文字上下居中 line-height = height
5、装饰：text-decoration
6、文本图片水平对齐：verti-align:middle
Title
123
123
123
人物介绍
hzx
zs
asdsadas
超链接伪类：a,a:hover 常用很重要
Title
666
阴影：
/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径 */
#p1{
text-shadow: #3cc7f5 10px 10px 10px;
}列表：
//html
Title
//css
#nav{
width: 300px;
background: #a0a0a0;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red;
}
/*ul li
list-style: none;去掉圆点
circle;空心圆
decimal;数字
square;正方形
*/
/*ul{*/
/* background: #a0a0a0;*/
/*}*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: #000000;
}
a:hover{
color: orange;
text-decoration: underline;
}
背景：
背景颜色
背景图片：
Title
渐变：
Title
12321a
盒子模型
什么是盒子模型：
margin：外边距
padding：内边距
border：边框
边框：
1、边框的粗细
2、边框的样式
3、边框的颜色
Title
会员登陆
内外边距：
Title
会员登陆
盒子计算模型：margin+border+padding+内容宽度
圆角边框：
4个角
Title
盒子阴影：
Title
浮动
标准文档流
块级元素：独占一行
行内元素：不独占一行
行内元素可以被包含在块级元素中，反之则不可以
display：
Title
div元素块
span行内元素
这也是实现行内元素排序的方式,但是我们很多情况都是用float
浮动：
float:left 左浮动
right 右浮动
clear:both 清除浮动父级边框塌陷问题：
clear:
clear:left 左侧不允许浮动
right 右侧不允许浮动
both 两侧不允许浮动解决方案：
- 增加父级元素的高度
#father{ border：1px solid #000; height: 800px; } - 增加一个空的div标签，清除浮动
.clear{ clear:both; margin:0; padding:0; } - overflow
在父级元素中增加一个overflow:hidden; - 父类添加一个伪类：after
#content:after{ fater:''; display: block; clear: both; }
小结：
- 浮动元素后面增加空div简单，代码中尽量避免空div
- 设置父级元素的高度简单，元素假设有了固定高度，就会被限制
- overflow 简单 下拉的一些场景避免使用
- 在父类添加伪类：after推荐使用 写法稍微复杂 但是没有副作用
对比
- display 方向不可以控制
- float 浮动起来的话脱离标准文档流，所以要解决父级边框塌陷的问题
定位：
相对定位：position：relative；
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留
Title
第一个盒子
第二个盒子
第三个盒子
绝对定位：
定位：基于XXX定位，上下左右
1、父级元素没有定位的情况下，相对于浏览器定位
2、假设父级元素存在定位，相对于父级元素进行偏移
3、在父级元素范围内移动
相对于父级或者浏览器的位置，进行指定的偏移，绝对行为的话，它不在在标准文档流中，原来的位置不会被保留
Title
第一个盒子
第二个盒子
第三个盒子
固定定位：
Title
第一个盒子
第二个盒子
z-index：图层 默认是0 越大越先显示
#content{
width: 380px;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid black;
}
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 380px;
height: 25px;
top: 90px;
}
.tipText{
color: white;
z-index: 0;
}
.tipBg{
background: #000;
/*opacity: 0.5; /*背景透明度*/
filter: alpha(opacity=50);/*IE8更早才支持 背景透明度*/
}
-----------------------------------------------------------------------------------------
Title
背景透明度：
opacity: 0.5; /*背景透明度*/
filter: alpha(opacity=50);/*IE8更早才支持 背景透明度*/学Java关注狂神说Java