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>

　　

Day13 CSS样式的更多相关文章

  1. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  2. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  4. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  5. 脚本工具（获取某个文件夹下的所有图片属性批量生成css样式）

    问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...

  6. jQuery所支持的css样式

    jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...

  7. Yii2 assets注册的css样式文件没有加载

    准备引入layui.css文件的,在LayuiAssets类中已经配置了资源属性 <?php namespace frontend\assets; use yii\web\AssetBundle ...

  8. 获取元素计算后的css样式封装

    获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...

  9. JS实战 · 仿css样式选择器

    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...

随机推荐

  1. netty关键字

    ------------恢复内容开始------------ buffer 本质读写的内存,三个属性:capacity.position和limit capacity:容器大小 position:读写 ...

  2. Python-组织结构-目录结构、包导入、__init__文件、模块内置变量、* 导入限制

    __pycache__ .pyc文件,中间代码,提升python运行效率 目录 分档和归类 Python项目组织结构 包 模块 类 函数.变量 # 层级依次往下都是一对多关系 Python项目目录结构 ...

  3. 从面向过程到面向对象再到MVC

    /* * * title: 从面向过程到面向对象再到MVC * author: tanghao * date: 2020.9.30 * version: 1.0 * */ 前言 本文档通过一个显示20 ...

  4. 【小白学PyTorch】17 TFrec文件的创建与读取

    [新闻]:机器学习炼丹术的粉丝的人工智能交流群已经建立,目前有目标检测.医学图像.时间序列等多个目标为技术学习的分群和水群唠嗑的总群,欢迎大家加炼丹兄为好友,加入炼丹协会.微信:cyx64501661 ...

  5. Python3基础——字符串类型

    Text Sequence Type - str(immutable) class str(object='') class str(object=b'', encoding='utf-8', err ...

  6. matlab一个figure画多个子图，和多个figure画多个图。

    参考:https://blog.csdn.net/xiaotao_1/article/details/79024488 1,一个figure画多个子图: figure(10) % define fig ...

  7. 【题解】[CQOI]动态逆序对

    题目链接 题意如题,维护一个动态序列的逆序对总数. 注意题目给的是\([1,n]\)的排列,所以没必要离散化了. 考虑逆序对:二维偏序可以用树状数组做,现在是三维偏序,即加了一个时间维度. 找一个数前 ...

  8. 更简易的机器学习-pycaret的安装和环境初始化

    1.安装 pip install pycaret 在谷歌colab中还要运行: from pycaret.utils import enable_colab enable_colab() 2.获取数据 ...

  9. JMeter实战(一) 体系结构

    此为开篇,介绍JMeter的组成结构,阅读后对JMeter形成整体认知和初步印象. 为了便于后续讲解,先明确下2个术语. 元件:如HTTP请求.事务控制器.响应断言,就是一个元件. 组件:如逻辑控制器 ...

  10. Linux输入子系统 转载

    NQian 记录成长~ 首页 新随笔 联系 订阅 管理 随笔 - 305  文章 - 0  评论 - 254 12.Linux之输入子系统分析(详解)   在此节之前,我们学的都是简单的字符驱动,涉及 ...