标签：设置 目录 浏览器 点击 css盒子模型 可见 contain nta tle
1.直接写在head标签里面
<head>
<style>
.c1{background-color:red;text-align:center;}
</style>
</head>
2.直接写在body标签里面 (也叫内联选择器)
<head>
<div style="background-color:red;text-align:center;"></div>
</head>
3.写入head标签里，从外部文件引入
<link rel=‘stylesheet‘ href=‘目标css文件‘>
元素选择器
标签{属性:值}
div{height=100px;width=100px;}
类选择器
.类名{属性:值}
.c1{height=100px;width=100px;}
id选择器
#id值{属性:值}
.d1{height=100px;width=100px;}
通用选择器
*{属性:值} #所有标签都会具有的属性
*{height=100px;width=100px;}
后代选择器
div a{属性:值} #表示div标签后的所有a标签
儿子选择器
div>a{属性:值} #表示以div为父级标签的所有a标签
毗邻选择器
div+a{属性:值} #div标签的下一个标签
弟弟选择器
div~a{属性:值} #div标签后下一个为a的所有标签
input[title]{color:red} #找到属性为title的input标签
input[title=‘text‘]{color:red} #找到属性为title，且值为text的input标签
a:link{} #未访问的网址链接
a:visited{} #访问过的网址链接
a:active{} #鼠标点击链接但还未抬起的时候
a:hover{} #鼠标移动到链接上，也可适用于其他标签
#注意，要想a标签同时具有移动到标签时改变属性的效果以及点击链接时改变属性的效果，必须先把active放在前面
input:foucus{outline:none;background-color:pink} #当选中input标签文本框时产生效果
标签:first-letter{}
div:first-letter{color:red;font-size:20px}
标签:before{}
p:before{content:‘呵呵‘,color:blue;font-size:20px}
标签:after{}
p:after{content=‘哈哈‘,color:pink;font-size:20px}
#分组
div,p{属性:值}
#继承
所以的父级标签的属性后代都会有，除非后代自己设置了相同的属性将其覆盖
继承的优先级(权重)为0
元素选择器的优先级为1
类选择器的优先级为10
id选择器的优先级为100
内联选择器的优先级为1000
可以通过添加!important属性使得标签的优先级最高
height:高度
width:宽度
.c1{
height:100px;
width:100px
}
font-family:字体
font-size:字体大小 默认为16px
font-weight:字体粗细 字体粗细有normal、bold、bolder、100-900(400等于normal，700等于bold)
color:字体颜色 颜色有四种形式
.c1{
font-family:‘宋体‘,‘楷体‘,‘黑体‘;
font-size:20px
font-weight:bold
color:rgba(255,255,0,0.3)
}
文字排列：text-align:排列方式
文字装饰：text-decorate:装饰方式
首行缩进：text-indent:32px
.c1{
text-align:center;
text-decorate:none;
text-indent:32px;
}
background-color:背景颜色
background-image:url(‘路径‘)
background-repeat:重复方式
background-position:位置
.c1{
background-color:rgb(255,0,0);
background-image:url(‘佛卢瓦.jpg‘);
background-repeat:no-repeat;
background.position:center center;
}
#简写形式
.c1{
background:rgb(255,0,0) url(‘佛卢瓦.jpg‘) no-repeat center center;
}
.c1{
width:200px;
height:200px;
border-width:10px;
border-style:solid;
border:red;
border-radius:50%;
}
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
可以简写为padding:10px(上下) 20px(左右);
padding:10px(上),20px(右),10px(下),20px(左)
margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;
可以简写为margin:10px(上下) 20px(左右);
margin:10px(上),20px(右),10px(下),20px(左)
#注意，当两个标签都设置了外边距的话，上下边距取最大子，左右边距累加
.c1{
float:right
}
注意：浮动会造成父级标签塌陷问题
解决父级塌陷的方法：1.父级标签设置高度
2.父级标签下一级标签设置clear:both属性
3.父级标签加上如下伪元素选择器
clearfix:after{
content:‘‘;
display:block;
clear:both;
}
#圆形头像实例
<head>
<meta charset="UTF-8">
<title>圆形头像实例</title>
<style>
.c1{
height:100px;
width:100px;
border:2px solid pink;
border-radius: 50%;
overflow: hidden;
}
.c1 img{
width:100%;
}
</style>
</head>
<body>
<div class="c1">
<img src="cat.jpg">
</div>
</body>
/*position:定位方式;
top:px距离;
bottom:px距离;
left:px距离;
right:px距离;
*/
#实例
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1{
height:200px;
width:200px;
text-align: center;line-height: 200px;
border:2px solid pink;
padding: 20px;
position: fixed;
top: 50%; left: 50%;
margin-top: -100px;margin-left: -100px; #注意使用这行的形式
/*margin-bottom: 100px;margin-right: 100px;*/ #这种格式不会产生作用
}
</style>
</head>
<body>
<div class="c1">
啦啦啦
</div>
</body>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1{
height:200px;
width:200px;
text-align: center;line-height: 200px;
background-color: red;
border:2px solid pink;
padding: 20px;
position: fixed;
top: 50%; left: 50%;
margin-top: -100px;margin-left: -100px;
z-index: 2;
}
.c2{position: absolute;
height: 600px;width: 100%;
background-color: blue;
z-index: 1;
}
</style>
</head>
<body>
<div class="c2">
</div>
<div class="c1">
啦啦啦
</div>
</body>
</html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1{
height: 300px;width: 100px;
background-color: rgba(255,255,0,0.5);
border: 10px solid blue;
padding: 20px;
margin: 20px;
opacity: 0.3;
}
</style>
</head>
<body>
<div class="c1">
啦啦啦
</div>
</body>
</html>
标签：设置 目录 浏览器 点击 css盒子模型 可见 contain nta tle
原文地址：https://www.cnblogs.com/Programmatic-yuan/p/13166832.html
