CSS
2017-07-14 本文已影响11人
imChay
CSS三种书写方式
外部样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>外部样式</title>
<!--外部样式书写
<link href="css/xxx.css" rel="stylesheet">
css的书写：
标签{
xx:xx;
xx:xx;
}
外部样式的原理，就是根据配置傻瓜式配置
-->
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div>这是一个容器标签</div>
<p>这是一个段落标签</p>
</body>
</html>
行内样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<body>
<!--注意书写格式
style = "xx：xx;xx:xx;"
-->
<div style="font-size: 30px ; color: black ; background-color: cadetblue;">这是一个容器标签</div>
<br/>
<p style="font-size: 20px;color: blue;background-color: gray">这是一个段落标签</p>
</body>
</html>
页内样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>页内样式</title>
<!--页内样式的书写
<style>
标签{xx:xx;
xx:xx;}
<style>
注意：font-size: 30px 要加px!!!
遵守原则：就近原则；叠加原则；
-->
<style>
div{
color: black;
background-color: gray;
}
div{
color: white;
background-color: blue;
font-size: 30px;
}
p{
color: blue;
background-color: saddlebrown;
font-size: 20px;
}
</style>
<!--<link href="css/index.css" rel="stylesheet">-->
</head>
<body>
<div>这是容器标签</div>
<div>这是容器标签</div>
<div>这是容器标签</div>
<p>这是段落标签</p>
<p>这是段落标签</p>
<p>这是段落标签</p>
</body>
</html>
CSS选择器
前三个选择器比较常用
1、标签选择器
div{
font-size: 30px;
background-color: saddlebrown;
}
2、类选择器
.test{
font-size: 25px;
background-color: gray;
}
3、id选择器 只有一处能用，当有多处使用的时候就报错
#myid{
font-size: 20px;
background-color: darkslategray;
}
4、并列选择器 逻辑或：满足一个条件就使用样式
div,.test{
font-size: 10px;
background-color:darkred;
}
5、复合选择器 逻辑与：同时满足条件才可以
div.test{
font-size: 10px;
background-color:darkred;
}
6、后代选择器
div p{
background-color: darkred;
}
7、直接后台选择器
div > p{
background-color: green;
}
8、相邻兄弟选择器
div + p{
background-color: gray;
}
9、属性选择器
div[name]{
background-color: green;
}
10、、伪类选择器 当鼠标移动到上面的时候
#myid:hover{
background-color: gray;
}
11、伪元素选择器
div:first-letter{
background-color: gray;
}
CSS属性
div{
color: white;
background:url("images/1.jpeg");
/* no-repeat 设置不平铺
cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。*/
background-size: cover;
width: 200px;
height: 200px;
/*
visibility 会隐藏内容,不会隐藏尺寸
display 既隐藏内容,又隐藏尺寸
*/
/*visibility: hidden;*/
/*display: none;*/
background-color: green;
/*字体 */
font-family: '宋体';
/*字体加粗 */
font-weight: bold;
/*设置光标类型 */
cursor: crosshair;
/*加下划线 underline none*/
text-decoration: underline;
/*text-decoration-color: red;*/
/*首行缩进30%*/
text-indent: 30%;
}
ul{
/*指示点是方形*/
list-style: square;
}
p{
/*一定要注意：写数字就要加 px!!! */
width: 100px;
height: 50px;
/*超出标签部分内容隐藏 auto */
overflow: auto;
}
可继承属性
<!--可以继承的属性
这个属性,所有标签可继承
visibility、cursor
这些属性,只有内联标签可继承
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
这些属性,只有块级标签可继承
text-indent、text-align
这些属性,只有列表标签可继承
list-style、list-style-type、list-style-position、list-style-image
不可继承属性
display、margin、border、padding、background
height、min-height、max-height、width、min-width、max-width
overflow、position、left、right、top、bottom、z-index
float、clear
table-layout、vertical-align
page-break-after、page-bread-before
unicode-bidi
