前端之CSS
css选择器
cascading style sheet 层叠样式表
css代码写法
h1{color:red} 选择器{css属性:属性值}
css的三种引入方式
方式1(head标签导入)
<style>
div{background-color: darkkhaki;height: 100px;width: 100px}
</style>
方式2(内敛方式书写)
<div style="background-color: cornsilk;width: 100px;height: 100px;"></div>
方式3(外部文件导入)
再head标签写link标签
<link rel="导入文件类型" href="文件路径">
<link rel="stylesheet" href="sty.css">
sty.css文件内容
div{background-color: greenyellow;width: 500px;height: 500px}
css选择器种类(以下标签名都为元素选择器,以方便理解)
基本选择器
元素选择器
标签名(div,span等){css属性:值}
ID选择器
#ID的值{css属性:值}
类选择器(class)
.类值{Css属性:值}
标签名.类值{css属性:值} ----限定标签名的类值生效
div.类值{css属性:值} -----限定div标签
通用选择器(*)
*{css属性:值} 所有标签设定
组合选择器
后代选择器
标签名 标签名下的标签名{css属性:值}
div a{css属性:值} ---div标签后代里面的所有a标签
儿子选择器
标签名>标签下一层的标签名{css属性:值}
div>a{css属性:值} ---div标签后的a标签生效
毗邻选择器
标签名+标签名下相邻的标签{css属性:值}
div+a{css属性:值} ---与div相邻的下邻居的a
弟弟选择器
标签名~标签名相邻下的所有标签{css属性:值}
div~a{css属性:值} ---找到同级的a
属性选择器
标签名[属性名]{css属性:值}
div[title]{css属性:值} 找到含有title属性的div标签
div[title=ss]{css属性:值} 找到含有title属性并且值为ss 的div标签
[title] 所有含有title属性的标签
分组选择器
标签名1,标签名2{css属性:值} ----标签1标签2共享样式
div,p{css属性:值} ---div,p 共同样式
伪类选择器
a标签
a自带样式:未访问未蓝色,访问后为紫色.
a:link{css属性:值} 未访问的变样式
a:visited{css属性:值} 已访问的变样式
a:hover{css属性:值} 鼠标悬浮变样式(可以用再其他标签)
a:active{css属性:值} 点击变样式
input标签
input:focus{css属性:值} input选择后改变样式
伪元素选择器
标签名:first-letter{css属性:值}
首字母大写
标签名:before{content:">";css属性:值}
在标签前插入内容.content对应的为加入的内容
标签名:after{content:"<";css属性:值}
在标签后插入内容.content对应的为加入的内容
css选择器优先级(权重,永不进位)
继承选择器的优先级为:0
元素选择器的优先级为:1
类选择器的优先级为:10 (优先级相同\最后运行的样式;代码从上到下运行)
ID选择器的优先级为:100
内敛样式的优先级为:1000
!important优先级为:无敌 --->写在样式中{color:red !important}
嵌套选择器优先级算法为:加法(优先级数字累加超过100 优先级也不会超过ID选择器)
注意:某些标签样式设置有内置样式,权重大于继承(如:a标签)
css属性相关
高度宽度设置
注意:只有块级标签能设置高度宽度,内敛标签不能设置高度宽度.内敛标签的高度宽度有内敛标签内的内容决定
div {
width:100px;宽度
height:100px;高度
}
字体属性
字体设置:
div{
font-family: '新細明體-ExtB';
font-family: '細明體_HKSCS-ExtB','黑体','宋体'; #某些浏览器不 支持第一个,就会向后寻找
}
字体大小设置:
div{
font-size:18px ; #默认为16px
}
字体粗细:
div{
font-weight: 100; #还有bold等
}
颜色表示方式
red 色彩单词
#ff0000 16进制
rgb(123,199,255) rgb表示方式
rgba(123,199,255,0.3) rgbc最后一位为透明度
文字属性
文字对齐:
text-align:center #居中
text-align:reght #左对齐
text-align:left #右对齐
文字装饰:
text-decoration:none 去下划线
text-decoration:line-through 中划线
text-decoration:overline 上划线
首行缩进:
text-indent:xxpx 首行缩进xxpx(默认字体大小16px.缩进2个字符32px)
背景属性
背景颜色:
background-color:颜色属性
背景图片:
background-image: url("图片路径")
background-repeat: no-repeat 不平铺(repeat-x:x轴平铺;repeat-y:y轴方向平铺)
background-position:位置信息
位置信息:左上(left top) 右下(right bottom) 中间(center center)...
位置信息:100px 50px (距离左边100px,距离上50px)
固定屏幕某地方:
background-attachment:fixed 固定在屏幕某地方
简写方法:background:url("图片路径") no-repeat center center
边框
border-style:边框样式
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。
border-color:边框颜色
border-width:边框宽度
上下左右每个边框都可单独设置
border-left-corlor:bule
border-right-corlor:red
border-top-corlor:yellow
border-bottom-corlor:green
简写方式:border: 2px solid red: 宽度,样式,颜色
border-left:2px solid red: 宽度,样式,颜色
border-radius:px/% 边框圆角
display
转变标签某些属性
display:inline 将标签设置为内敛标签
display:block 将标签设置为块级标签
display:inline-block 将标签设置为内敛和块级共有属性(可以设置高度宽度,单不独占一行)
display:none 将标签隐藏,并且不占用之前的空间
Visibility:hidden 将标签隐藏,但是占用原位置
css盒子模型
content 内容区域
padding 内边距
简写:padding 10px 20 px 上下10px,左右20px
padding 10px; 上下左右px
padding 5px 4px 3px 2px 上右下左内边距
border 边框宽度
margin 外边距(标签与标签之间的距离)
margin-left:左外边距
margin-right:右外边距
margin-top:上外边距
margin-bottom:下外边距
简写:margin:上下外边距
margin:上右下左外边距
float浮动
float:left 向左浮动
float:right 向右浮动
clear:both清除左右浮动/left清除左浮动/right清除右浮动
子标签全部浮动,如父标签无高度,会导致父级标签塌陷(父级标签高度为0,不显示).
解决方式:方法一:clear:both 不允许图层上有浮动
方法二:给父级标签加: .clearfix(名字可以自定义,一般为clearfix):after{
content:""
display:block
clear:both
} #通过给父级标签加"" 设置成块级,且不允许浮动
clear
clear清除浮动
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
overflow溢出
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
圆形头像
将div设置圆边,比例50%就为圆形
将图片宽度设置为100%!就不会超过父级标签
注意设置overflow:fidden
<div style="overflow: hidden;border-radius: 50%;background-color: antiquewhite;width: 50px;height: 50px"></div>
将背景颜色换成图片就可以
定位position
相对定位
position:relative 相对定位(相对自己原来位置定位,保留自己原来位置)
top: 距离原上边框的距离
right: 距离原右边框的距离
bottom: 距离原下边框的距离
left: 距离原左边框的距离
绝对定位
position:absolute 绝对定位(相对父级,祖先级标签,找设置了相对定位的父级标签位置来移动,如果找不到按照整个网页来移动,不保留自己原来位置)
top: 距离原上边框的距离
right: 距离原右边框的距离
bottom: 距离原下边框的距离
left: 距离原左边框的距离
固定定位
position:fixed 固定定位(基于浏览器窗口位置)
top: 距离浏览器窗口顶部的距离
right: 距离浏览器窗口右边的距离
bottom: 距离浏览器窗口底部的距离
left: 距离浏览器窗口左边的距离
锚
锚点:<a name="top"></a> #name 和ID 都可以
触发锚点:<a herf="#top"></a> #herf里写#对应的id或者name值
z-index(控制层级)
z-index:值
z-index 值大的在上面
opacity透明度
opacity:透明度值(范围:0~1)
rgba 背景颜色透明度
opacity 整体透明度
2
