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. 090 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 04 使用包进行类管理（2）——导入包

    090 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  2. 074 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 06 综合案例-数组移位-主方法功能3的实现

    074 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 06 综合案例-数组移位-主方法功能3的实现 本文知识点:综合案例-数组移位-主方法功能3的实现 说明:因为 ...

  3. 071 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 03 综合案例-数组移位-显示数组当中所有元素的的方法

    071 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 03 综合案例-数组移位-显示数组当中所有元素的的方法 本文知识点:综合案例-数组移位-显示数组当中所有元素 ...

  4. 【代码审计】JAVA代码审计

    分享一些Java安全相关文章,其中大部分都涉及到代码的分析与审计. 大家总是在找Java的代码审计的文章,但好像很多人选择性失明. 其实Java没有和PHP一样的简单,所以你觉得你看到的文章不是入门级 ...

  5. 批处理中的删除命令：del

    转载:https://blog.csdn.net/playboy1/article/details/6869358 删除一个或数个文件.DEL [/P] [/F] [/S] [/Q] [/A[[:]a ...

  6. LNMP架构介绍与部署

    一.LNMP架构介绍 LNMP:Linux系统下Nginx+MySQL+PHP这种网站服务器架构.Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP代理服务器.My ...

  7. Python基础笔记2-ruamel.yaml读写yaml文件

    上一篇笔记记录了Python中的pyyaml库对yaml文件进行读写,但了解到ruamel.yaml也能对yaml文件进行读写,于是想尝试一下它的用法. 一,注意 这里首先要更正一下网上大部分博客的说 ...

  8. CSS字体属性与文本属性

    CSS字体属性与文本属性 1. 字体属性 1.1 字体系列font-family p { font-family: "Microsoft Yahei";/*微软雅黑*/ } /*当 ...

  9. matplotlib画图教程，设置坐标轴标签和间距

    大家好,欢迎来到周四数据处理专题,我们今天继续matplotlib作图教程. 在上周的文章当中我们介绍了如何通过xlabel和ylabel设置坐标轴的名称,以及这两个函数的花式设置方法,可以设置出各种 ...

  10. 【转】了解nodejs、javascript间的关系！bom&dom&ecmascript

    地址:https://www.cnblogs.com/JetpropelledSnake/p/9450810.html bom&dom:https://www.cnblogs.com/wang ...