CSS 1.css介绍 css指的是层叠样式表（cascading style sheets） 官方文档：https://www.w3school.com.cn/css/index.asp为什么需要c
第13天半铸钢ˌ钢性铸铁(Cast Semi-Steel)样式
顺晟科技
2021-06-30 17:16:33
256
1. css 选择器
1.1 css三种引入方法
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title> css三种引入方法,和常见三种选择器 </title>
<!--2.内嵌样式-->
<style>
p{font-size:30px} /* 1.标签选择器 : 指的是哪一种标签*/
.one{color: green;} /* 2.类选择器 : 指的是哪一类标签*/
#two{color:red} /* 3.ID选择器 : 指的是哪一个标签*/
</style>
<!--3.外部链接引入-->
<link href="./ceshi.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>今天深圳挺热,但是北京挺冷</p>
<!--1.行内样式-->
<p style="color:blue" >今天深圳挺热,但是北京挺冷</p>
<p class="one" >今天深圳挺热,但是北京挺冷</p>
<p id="two" >今天深圳挺热,但是北京挺冷</p>
</body>
</html>
<!--
p div 块状 可以设置宽高 独占一行
span a 行内 不能独占一行, 不能设置宽高
img input 行内块状元素 不能独占一行, 可以设置宽高
-->
【ceshi.css】
body{background-color:yellow;}
1.2. 组合器
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title> 组合选择器 </title>
<style>
h1,h2,h3,h4{color:blue;}
.a1{font-size : 30px;color:yellow;}
h3.a1{font-size:50px;color:red;}
#a1{font-size : 40px;color:pink;}
h3#a1{font-size:60px;color:green;}
</style>
</head>
<body>
<!--
class 类选择器 可以使用多次
id ID选择器 可以使用一次 (多次使用可以执行,但是不推荐这样使用;)
-->
<h1>字体更大的是h1</h1>
<h2>其次是h2</h2>
<h3 class="a1">其次是h3111</h3>
<h3 id="a1">其次是h3222</h3>
<h4 id="a1">其次是h4333</h4>
<h5 >其次是h5444</h5>
</body>
</html>
<!--
p div 块状 可以设置宽高 独占一行
span a 行内 不能独占一行, 不能设置宽高
img input 行内块状元素 不能独占一行, 可以设置宽高
-->
1.3. 选择器优先级
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title> 选择器优先级 </title>
<style>
/* !important 刻意提升css的优先级 */
font{color:pink!important;}
.b1{color:yellow;}
#b2{color:green;}
</style>
</head>
<body>
<!-- !important <- 行内样式 <- ID选择器 <- 类选择器 <- 标签选择器 -->
<font style="color:purple;" class="b1" id="b2" > 选择器优先级 </font>
</body>
</html>
1.4. 关系型选择器
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title> 关系选择器 </title>
<style>
ul li{color:green;} /* 包含选择器/后代 */
ul>li{color:red;} /* 父子选择器 */
ol+li{color:pink;} /* 相邻选择器 */
ol~li{color:blue;} /* 兄弟选择器*/
</style>
</head>
<body>
<ul>
<li>动漫频道</li>
<li>乡村频道</li>
<ol>
<li>少儿频道</li>
<li>成人频道</li>
<li>探索频道</li>
</ol>
<li>宇宙频道</li>
<li>科幻频道</li>
<li>文化频道</li>
</ul>
</body>
</html>
1.5 属性选择器
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title> 属性选择器 </title>
<style>
/*泛指的元素优先级低 特指的元素优先级高*/
input[name]{background-color:green;}
input[type=text]{background-color:yellow;}
input[type=password]{background-color:red;}
</style>
</head>
<body>
<form action="" method="">
用户名: <input type="text" name="" />
<br />
昵称: <input type="text" name="" />
<br />
密码: <input type="password" name="" />
<br />
性别: <input type="radio" name="sex" value="m" /> 男
<input type="radio" name="sex" value="w" /> 女
</form>
</body>
</html>
1.6 伪类选择器
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title> 伪类选择器 </title>
<style>
/* 鼠标滑过时变色 */
a:hover{color:green;}
/* 列表中个元素 */
ul li:first-child{color:red}
/* 列表中最后一个元素 */
ul li:last-child{color:yellowgreen;}
/* 列表中具体那一个元素 */
ul li:nth-child(1){color:pink;}
/* even 代表偶数 , odd 代表奇数 , 使用n的计算关系制定找寻元素 例如: 2n 2n-1 */
ul li:nth-child(even)
{background-color:purple;}
ul li:nth-child(2n)
{background-color:green;}
ul li:nth-child(odd)
{background-color:yellow;}
ul li:nth-child(2n-1)
{background-color:blue;}
/* 小练习 */
/* 2.偶数行颜色为蓝色 */
table tr:nth-child(even)
{background-color:blue;color:white;}
/* 3.第3 , 6 , 9 3被行颜色为黄色 */
table tr:nth-child(3n)
{background-color:yellow;}
/* 4.鼠标滑过时,颜色变成红色*/
table tr:hover
{background-color:red;}
/* 合并边框 */
table
{border-collapse:collapse}
/* 颜色设置可以使用十六进制 */
/*
red 0 ~ 255 0 ~ ff
green 0 ~ 255 0 ~ ff
blue 0 ~ 255 0 ~ ff
f -> 15 1111 ff -> 255 11111111
纯红色: #ff0000 => 简写: #f00
纯绿色: #00ff00 => 简写: #0f0
纯蓝色: #0000ff => 简写: #00f
(两个值相同的情况下,可以缩写)
十六进制: 0~9 a~f a => 10
#a1b2c3
*/
</style>
</head>
<body>
<a href="#"> 老男孩IT教育 之 Alex</a>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
<li>7777</li>
<li>8888</li>
</ul>
<!--
小练习:
1.写一个table表格,设置一个背景色
2.偶数行颜色为蓝色
3.第3 , 6 , 9 3被行颜色为黄色
4.鼠标滑过时,颜色变成红色
-->
<table border="1" width ="500px" height="300px;" align="center" style="background-color:#ff0000;">
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
</table>
<div style="width:100px;height:100px;background:#abc">
111
</div>
</body>
</html>
1.7 伪对象
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title> 伪类选择器 </title>
<style>
/* 鼠标滑过时变色 */
a:hover{color:green;}
/* 列表中个元素 */
ul li:first-child{color:red}
/* 列表中最后一个元素 */
ul li:last-child{color:yellowgreen;}
/* 列表中具体那一个元素 */
ul li:nth-child(1){color:pink;}
/* even 代表偶数 , odd 代表奇数 , 使用n的计算关系制定找寻元素 例如: 2n 2n-1 */
ul li:nth-child(even)
{background-color:purple;}
ul li:nth-child(2n)
{background-color:green;}
ul li:nth-child(odd)
{background-color:yellow;}
ul li:nth-child(2n-1)
{background-color:blue;}
/* 小练习 */
/* 2.偶数行颜色为蓝色 */
table tr:nth-child(even)
{background-color:blue;color:white;}
/* 3.第3 , 6 , 9 3被行颜色为黄色 */
table tr:nth-child(3n)
{background-color:yellow;}
/* 4.鼠标滑过时,颜色变成红色*/
table tr:hover
{background-color:red;}
/* 合并边框 */
table
{border-collapse:collapse}
/* 颜色设置可以使用十六进制 */
/*
red 0 ~ 255 0 ~ ff
green 0 ~ 255 0 ~ ff
blue 0 ~ 255 0 ~ ff
f -> 15 1111 ff -> 255 11111111
纯红色: #ff0000 => 简写: #f00
纯绿色: #00ff00 => 简写: #0f0
纯蓝色: #0000ff => 简写: #00f
(两个值相同的情况下,可以缩写)
十六进制: 0~9 a~f a => 10
#a1b2c3
*/
</style>
</head>
<body>
<a href="#"> 老男孩IT教育 之 Alex</a>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
<li>7777</li>
<li>8888</li>
</ul>
<!--
小练习:
1.写一个table表格,设置一个背景色
2.偶数行颜色为蓝色
3.第3 , 6 , 9 3被行颜色为黄色
4.鼠标滑过时,颜色变成红色
-->
<table border="1" width ="500px" height="300px;" align="center" style="background-color:#ff0000;">
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
<tr>
<td>ceshi111</td>
<td>ceshi222</td>
<td>ceshi333</td>
</tr>
</table>
<div style="width:100px;height:100px;background:#abc">
111
</div>
</body>
</html>
相关文章
-
09
2022-11
-
09
2022-11
-
09
2022-11
-
09
2022-11
-
09
2022-11
-
19
2022-10
推荐阅读
随机推荐
- Java中的不稳定的关键字
- 硒的钢性铸铁选择器使用方法
- CSS笔记(3)
- PHA开挖收益怎么样？如何选择好的矿机？
- css实现透明的两种方式及其区别
- HTML、CSS、JS、PHP的学习顺序~(零基础初学者)
- 原生js实现上一次点击图片
- CSS的网页缩放属性zoomtransform的scale
- “缩放:1”在css中是什么意思？
- 使用HTML+CSS jQuery编写的简易计算器
- 使用CSS2对页面中的文字添加彩色边框
- CSS中的鼠标样式明细
- 仅用 CSS 实现多彩、智能的阴影
- CSS系列(03):CSS的三大特性
- CSS技术之一-可变宽度溢出文本自适应滚动
- CSS3转换基本用法介绍
- 水平和垂直中间CSS
- 适应CSS背景图像屏幕
- 前端知识框架1-css的讲解
- 11种常用css样式之开篇文本字体学习