css常见选择器和属性

css概述
　　为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表.有了CSS,html中大部分表现样式的标签就废弃不用了,
html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁
　　 标签选择器  　　　　# 标签选择器,此种选择器影响范围大,一般用来做一些通用设置,或用在层级选择器中　　　　
   a{}
    ID选择器　　 　　　　
　　#btn{}
    类选择器　　　　　# 通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器　 　　　　
　　.mydiv{}
    通用选择器   　　　　
　　*{}
    并集(分组)选择器          　　　　
　　a,.p,#span{}
    层级选择器  　　　　# 主要应用在标签嵌套的结构中,层级选择器,是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用,减少命名,同时也可以通过层级,限制样式的作用范围　　　　
　　.con span{color:red}　　
　　直接子代选择器　　　　　　　　　　　li>a{}
    后代选择器　　　　　　　　　　　　　ul a{}
    伪类选择器  　　　　# 描述的是状态   　　　　
　　a:hover{} 
   
    毗邻选择器 　　　　#紧挨着的(上面必须是div)  　　　　
　　div+p{}
    弟弟选择器  　　　　div~p{}
    属性选择器  　　　　[class:div]{}
    html关联CSS
            <link rel="stylesheet" type="text/css" href = "想要连接的CSS的文件">

块级元素
Box-sizing: border-Box;  盒子模型,它的存在修改了width和hight的含义
width:100px;　　　　  宽度
height:100px;　　　   高度
background:red; /#f00/rgb(255,0,0)/rgba(255,0,0,0.2)   背景颜色
opacity:0.3;    透明度的为 0.3
margin:0 auto;  版心居中(指的整体的内容居中)
padding:20px;   内边距
margin:10px;    外边距
top bottom left right
    border  marign padding      都有上下左右属性
border: 1px #ccc solid;　　设置边框线
border:none;     　　　　　 去除边框线
outline:none;    
float:left;      左浮动
float:right;     右浮动
border-radious:50%;  设置边框的四角的弧度
color:red;  字体的颜色
    

字体
font-size:20px; 设置字体的大小
font-weight:bold;
line-height:25px;　　行高
font-family:"宋体";  字体的属性
font-style: italic;
text-decoration:none;　　去掉a中的下划线等
list-style:none;　　　　　去掉ul中的样式
overflow:hidden;   溢出隐藏
overflow:auto;     增加自适应滚动条
   
color:red; #ccc; rgb(120,20,45) rgba(120,20,45,0.3)
text-align:center; 　　文字水平居中
text-height:height;　　文字垂直居中
text-indent:2em;　　   首行缩进
display:none;         不显示
display:block;        成块状显示
border-collapse:collapse;  合并边框线
(子绝父相)
    position:relative;
    position:absolute;
    position:fixed;
        left:0px;
        right:0px;
        top:0px;
        bottom:0px;
        transform:translate(-50%,-50%)
z-index   设置等级
resize:none;去掉中的textarea //线

css常见选择器和属性

相关文章