Fork me on GitHub

CSS常用属性

stylesheet css的样式,rel中的选项
标签选择器:选择一类的标签,所有的
类选择器:选择统一类名的标签
id选择器:全局唯一 # id名
------------------------------------
更高级的选择器
1.后代选择器 background背景颜色 ul li
2.子选择器 父类名字>子类名字 body>p
3.相邻兄弟选择器 用类选择器和+来定义,指向下面的一个标签
4.通用选择器 当前选中元素向下同济的所有标签 用类选择器和~定义
------------------------------------------------------------------
结构伪类选择器
ul li:第几个元素{

}
子类:nth-child(第一个元素) 必须是同类标签才能生效(不同类标签也会算在里面,但是不会生效)顺序!
子类:nth-of-type(第几个元素) 选择同类型标签的某个元素 (类型!)
--------------------------------------------------------------------
属性选择器
a【id=名字】{
}
= 绝对等于
*= 只要包含就可以
href^=www href中以www为开头的
href$=asd href中以asd结尾的
-------------------------------------------------------------------
font-family 字体样式
font-size 字体大小
font-weight: bold 字体粗细
color 颜色
text-align: center 字体居中
text-indent 首行缩进
line-height 行高
text-decoration:underline 下划线
text-decoration: line-through 中划线
text-decoration: overline 上划线
text-decoration: none; a标签去除下划线
vertical-align: middle; 图片和文字水平对齐
a:hover 鼠标悬停显示的颜色
a:active 鼠标点击出现的效果
text-shadow 阴影
list-style 列表黑点去除
------------------------------------------------------------------------
background-repeat: repeat-x 图片水平平铺
background-repeat: repeat-y 图片上下平铺
background-repeat: no-repeat 图片正常显示
background-image: url("."); 背景图片
border-radius 圆角边框
border: 1px solid red; 边框
display:block 块元素独占一行
display:inline-block 块元素水平对齐
float:左或右 浮动
overflow: scroll; 如果父级边框内容被修剪可以用滚动条
overflow: hidden; 解决父级边框塌陷问题
------------------------------------------------------------------------
解决父级边框塌陷(推荐的方法)
父级的类名:after{
content:"";
display:block;
clear:both;
}
------------------------------------------------------------------------------
相对定位: 相对于原来的位置偏移多少像素(px) 原来的位置会被保留
position: relative;
top 上
right 右
left 左
bottom 下
-----------------------------------------------------------------------------------
绝对定位:基于xxx定位,原来的位置不再存在
1.在没有父级元素的前提下,会基于浏览器的边框进行定位
2.在有父级元素的前提下,会基于父级元素进行定位
position: absolute;
-----------------------------------------------------------------------------------
position: fixed;固定定位 比如导航栏
z-index: 999; 图层,默认都是999
opacity: 数字 透明度

posted @ 2024-02-01 21:52  一名狗书匠&  阅读(8)  评论(0编辑  收藏  举报

asd