0基础学Web—css引入方式、基本选择器、层级选择器、字体样式、图片vertical、标签分类、高级选择器
css引入方式
1. 行内式
样式不能复用，代码可读性不好
<div>
<p style="color:red">张三</p>
<p>学习html</p>
</div>
2. 内嵌式
写在style中,本网页复用
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 25px;
}
</style>
</head>
3. 链入式
即在左侧工作区新建一个后缀名为.css的文件，并用link链接到html中
且可以被多个文件引用，样式和结构彻底分离
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./01-链入式css.css">
</head>
基本选择器
初始body块
<body>
<div>
<p class="active wd">张三</p>
<p class="active">学习</p>
<p id="py">html</p>
<div class="fr">美团外卖</div>
<span>你好</span>
</div>
</body>
通用选择器
<style>
*{
border: 1px solid black;
}
</style>
标签选择器
<style>
p{
font-size: 30px;
}
</style>
类选择器与并集选择器
类选择器:选出类名是active的标签
并集选择器:多个选择器有一样的样式
<style>
.active,.fr,span{
color:red
}
.wd{
font-weight: 900;
}
</style>
id选择器
<style>
#py{
color: green;
}
</style>
结果展示
层次选择器
E>F: E的子元素F
E F: E的后代F
E+F: E的第一个兄弟F
E~F: E的所有兄弟F
结构伪类选择器
E>F: nth-of-type(n)
E>F: first-of-type()
E>F: last-of-type()
E>F: last-of-type(2n) 偶数
E>F: last-of-type(2n+1) 奇数
body初始代码
<body>
<div class="wrapper">
<ul class="list">
<li>111111</li>
<li>222222</li>
<li><p>333333</p></li>
</ul>
<p>6666666</p>
<p>7777777</p>
</div>
<table width="800" border="1">
<tbody>
<tr><td>11</td><td>22</td><td>33</td></tr>
<tr><td>11</td><td>22</td><td>33</td></tr>
<tr><td>11</td><td>22</td><td>33</td></tr>
<tr><td>11</td><td>22</td><td>33</td></tr>
<tr><td>11</td><td>22</td><td>33</td></tr>
<tr><td>11</td><td>22</td><td>33</td></tr>
</tbody>
</table>
</body>
选择器的使用示例
<style>
/* 选出第二个子元素li */
.list>li:nth-of-type(2){
color: red;
}
/* 选出第一个子元素li */
.list>li:first-of-type{
color: rgb(50, 186, 190);
}
/* 选出最后一个子元素li */
.list>li:last-of-type{
color: rgb(172, 21, 109);
}
.wrapper>p:first-of-type{
color: blueviolet;
}
/* 选择所有后代元素p */
.list p{
color: burlywood;
}
/* 选择list下方的第一个p元素 */
.list+p{
font-weight: 900;
}
/* 选择list下方的所有p元素 */
.list~p{
/* 倾斜 */
font-style:italic ;
}
/* 偶数行 */
table tr:nth-of-type(2n){
background-color: #a9a442;
}
/* 奇数行 */
table tr:nth-of-type(2n+1){
background-color: #669ba9;
}
</style>
结果展示
字体样式
初始body代码
<body>
<h1>python</h1>
<a href="#">贴吧</a>
<div>
<p class="first">张三</p>
<div class="second">学习html</div>
</div>
</body>
样式
<style>
/* 字体样式: font- */
.first{
/* 字体大小 */
/* font-size: 30px; */
/* 字体粗细 */
/* font-weight: 700; */
/* 字体类型 */
/* font-family: 草檀斋毛泽东字体,宋体, 楷体; */
/* 字体风格 */
/* font-style: italic; */
/* 综合设置：风格 粗细 大小 类型 */
font: italic 700 30px 草檀斋毛泽东字体
}
h1{
/* 正常粗细 */
font-weight: normal;
}
/* 文本样式: text- */
.second{
font-size: 30px;
background-color: #bad3c5;
width: 300px;
/* height: 100px; */
/* 文本水平对齐方式 */
/* text-align:center; */
/* 首行缩进，1em=1个字号大小 */
text-indent:2em;
/* 文本装饰
underline:下划线
line-through:删除线
*/
text-decoration:underline;
/* 大小写转换 */
text-transform: uppercase;
/* 行高=上间距+字体高度+下间距 */
line-height:100px;
/* 文本阴影： x y 模糊半径 阴影颜色 */
text-shadow: 20px 20px 5px gray;
}
a{
text-decoration: none;
}
</style>
结果展示
图片vertical
body初始化代码
<body>
<div class="wrapper">
<img src="./imgs/renshou-01.png" width="200">
<span>张三</span>
</div>
</body>
vertical
<style>
.wrapper{
background-color: #7382b1;
}
img{
/* img特有属性:设置中线对齐 */
vertical-align:middle;
}
</style>
结果展示
标签分类
块级元素(h p div ul li): 单独一块，宽度和父元素一致,可以设置宽高
行级元素:
行内元素(span a):不换行，宽度由内容撑开，设置宽高无效
行内块(img input):不换行，宽度由内容撑开，,可以设置宽高
标签嵌套规则:
块级:块级元素 行内元素 行内块
行内块：行内块 行内元素
行内元素：行内元素
特殊的: p标签不允许嵌套div
改变标签特性:
display：inline 行内
display: block 块级
display: inline-block 行内块
高级选择器—否定伪类和伪元素
body初始化代码
<body>
<div class="wrapper">
<ul class="list">
<li>11111</li>
<li>22222</li>
<li class="last">33333</li>
</ul>
<form action="">
用户名: <input type="text" name="username"> <br>
地址: <input type="text" name="address"> <br>
密码: <input type="password" name="pwd"> <br>
</form>
<p class="info">
本报特约记者 王 逸 本报记者 赵觉珵
当地时间21日，国际刑事法院（ICC）对以色列总理内塔尼亚胡和前国防部长加兰特发出逮捕令。国际刑事法院称，针对二人的指控包括利用饥饿作为战争工具以及谋杀、迫害和其他不人道行为
。法新社最新消息称，内塔尼亚胡当天就此发表声明，指责国际刑事法院存在“反犹太主义”，并称此举为“现代版德雷福斯审判”。巴勒斯坦伊斯兰抵抗运动（哈马斯）当天则称，这是“迈向正义的重要一步”。
</p>
</div>
</body>
伪类
<style>
/*
否定伪类： 选择除了last以外所有li
*/
.list>li:not(.last) {
color: red;
}
/* 属性选择器 */
input[name='username'] {
background-color: #cc8a8a;
}
input[type='password'] {
background-color: #c8b6b6;
}
/* 伪元素选择器:通过css设置结构 */
.wrapper::before {
display: inline-block;
content: '张三';
width: 200px;
line-height: 30px;
background-color: #dea2a2;
}
.wrapper::after {
display: block;
content: '张三'
}
.info {
width: 300px;
}
/* 第一行 */
.info::first-line {
color: red;
}
/* 第一个字符 */
.info::first-letter {
color: rgb(114, 152, 47);
}
/* 鼠标选中文本的颜色 */
.info::selection {
background-color: #c13157;
}
</style>
结果展示
:hover属性
body代码
<body>
<div class="wrapper">
<div class="first"></div>
<br>
<div class="second">
<div>更多</div>
<div class="ls">
<div>家访</div>
<div>百货</div>
<div>运动</div>
</div>
</div>
</div>
</body>
:hover使用
:hover即鼠标经过该元素时的变化
<style>
.first{
width: 200px;
height: 200px;
background-color: #cea2a2;
}
.first:hover{
background-color:rgb(199, 69, 43) ;
}
.second{
width: 200px;
background-color: #d4b9b9;
}
.second>div:first-of-type{
font-size: 25px;
color:red
}
.ls{
/* 将ls隐藏 */
display: none;
}
.second:hover >.ls{
/* ls显示 */
display: block;
}
</style>
结果展示
原元素
鼠标经过时：
元素伪类选择器
body代码
<body>
<div>
<a href="http://www.jd.com">百度</a>
</div>
</body>
a链接属性
:link -> :visited -> :hover -> :active
link、visted、active是a标签特有
<style>
/* 访问前 */
a:link{
color: rgb(220, 8, 8);
}
/* 访问后 */
a:visited{
color: rgb(70, 167, 21);
}
/* 悬浮时 */
a:hover{
color: rgb(173, 80, 9);
}
/* 点击时 */
a:active{
color: rgb(210, 205, 54);
}
</style>