python-CSS学习
CSS介绍
CSS（Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观
CSS语法
每个CSS样式由两个组成部分: 选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束
CSS注释
/*这是注释*/
CSS的几种引入方式
行内样式: 行内式是在标记的style属性中设定CSS样式
<p style="color: red">Hello world.</p>
内部样式: 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
p{
height: 50px;
}
</style>
</head>
外部样式: 外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可.推荐使用此方式
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div></div>
</body>
index.css
这个.css文件是和你的html是一个目录下，如果不是一个目录，href里面记得写上这个.css文件的路径
div {
background-color: blueviolet;
height: 50px;
width: 90%;
}
body{
margin: 0;
}
CSS选择器
基本选择器
元素选择器(标签名)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {color: red} /*定义div标签中的内容为红色*/
</style>
</head>
<body>
<div>111</div>
<div>222</div>
<div>333</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</body>
ID选择器(id不能重复)
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
div{
background-color: red;
height: 50px;
}
/*#号表示id属性,后面的test表示id属性的值*/
#test{
background-color: green; /*设置id为test的div标签为绿色*/
height: 50px;
}
</style>
</head>
<body>
<div></div>
<div id="test"></div>
<div></div>
</body>
类选择器
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
div{
background-color: red;
height: 50px;
}
/*方法一 .表示class属性,test表示class的值*/
/*.test{*/
/*background-color: green;*/
/*height: 50px;*/
/*}*/
/*方法二 找到所有div标签里面含有class属性的值为test的div标签,注意他俩之间没有空格昂*/
div.test{
background-color: yellow;
height: 50px;
}
</style>
</head>
<body>
<div></div>
<div class="test test2 test3"></div> /*多个值空格分割*/
</body>
注意:
样式类名不要用数字开头(有的浏览器不认)
标签中的class属性如果有多个,要用空格分隔
通用选择器
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
/* *表示所有的标签*/
*{
background-color: blue;
height: 50px;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
组合选择器
后代选择器(子子孙孙都生效)
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
.test p{
background-color: yellow;
}
</style>
</head>
<body>
<div class="test">
<p>111</p>
<div>
<p>222</p>
</div>
<table>
<tr>
<td>333</td> /*这个不生效是因为选择了p标签*/
</tr>
</table>
</div>
<div>
<div>
<p>444</p> /*这个不生效是因为没用这个类*/
</div>
</div>
</body>
儿子选择器(只找儿子)
/*选择所有父级是class类的 <p> 元素*/
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
.test > p{
background-color: yellow;
}
</style>
</head>
<body>
<div class="test">
<p>111</p>
<div>
<p>222</p> /*这个不生效是因为这个是孙子*/
</div>
<table>
<tr>
<td>333</td> /*这个不生效是因为不是p标签*/
</tr>
</table>
</div>
</body>
毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
/*找div标签紧挨着的p标签*/
.test > div + p{
background-color: yellow;
}
</style>
</head>
<body>
<div class="test">
<p>111</p>
<div>
<p>222</p>
</div>
<p>111</p> /*此条标签生效*/
</div>
</body>
弟弟选择器
/*div后面所有的兄弟p标签*/
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
.test > div ~ p{
background-color: yellow;
}
</style>
</head>
<body>
<div class="test">
<p>111</p>
<div>
<p>222</p>
</div>
<p>111</p> /*此两条生效*/
<p>333</p>
</div>
</body>
属性选择器
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
/*找到div标签中test01的属性标签*/
div[test01] {color: red}
/*找到input标签中类型为text属性的标签*/
input[type='text'] {border: 1px solid red}
</style>
</head>
<body>
<div test01="nicai">div01</div>
<div test01="hello">div02</div>
<input type="text">
<input type="password">
</body>
组合选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*组合选择器*/
p>span,
p+span {color: red}
/*选择父级p标签的span标签和p标签紧挨着的span标签*/
</style>
</head>
<body>
<div>111</div>
<div id="d2" class="c1 c2">222</div>
<div>333</div>
<p>
<span>9527</span> /*这条生效*/
</p>
<p>p1</p>
<span>666</span> /*这条生效*/
<p>p2</p>
<p>p3</p>
</body>
选择器的嵌套
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
/*分组(多个选择器逗号分隔)
当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式*/
div,p,#h11,h1,div{
background-color: yellow;
height: 50px;
}
/*嵌套: 多种选择器可以混合起来使用*/
p{
height: 100px;
background-color: blue;
}
h1{
height: 80px;
background-color: green;
}
</style>
</head>
<body>
<div></div>
<p></p>
<h1 id="h11">9527</h1>
<h1></h1>
<div>6666</div>
</body>
伪类选择器
/* 未访问的链接 */ a:link { color: #FF0000 } /* 已访问的链接 */ a:visited { color: #00FF00 } /* 鼠标移动到链接上 */ a:hover { color: #FF00FF } /* 选定的链接 */ a:active { color: #0000FF } /*input输入框获取焦点时样式*/ input:focus { outline: none; background-color: #eee; }
伪元素选择器
first-letter 常用的给首字母设置特殊样式： p:first-letter { font-size: 48px; color: red; } before /*在每个<p>元素之前插入内容*/ p:before { content:"*"; color:red; } after /*在每个<p>元素之后插入内容*/ p:after { content:"[?]"; color:blue; } before和after多用于清除浮动
事例
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link {color: red} /*未点击连接前显示的颜色*/
a:visited {color: green}
a.active {color: blue}
#d1:hover {color: yellow} /*鼠标放上去显示黄色*/
input:focus { /*鼠标点击到输入框变颜色*/
outline: none;
border: 1px solid deeppink;
}
p:first-letter {color: red;} /*伪元素*/
p:before{
content: '*'; /*把p标签的第一个字符加上星号,全部变成红色*/
color: red;
}
p:after {
content: "[*]";
color: blue;
}
</style>
</head>
<body>
<a href="http://www.jd.com">jd</a>
<a href="http://www.baidu.com">baidu</a>
<span id = 'd1'>span</span>
<input type="text">
<p>想要带你去浪漫的西二旗</p>
<p>想要带你去浪漫的西二旗</p>
</body>
浙公网安备 33010602011771号