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. Centos-修改文件访问和修改时间-touch

    touch 如果文件存在,则改变文件的访问时间和修改时间,如果不存在则创建一个空文件 相关选项 -a   更改文件访问时间为当前系统时间 -m     更改文件修改时间为当前系统时间 -c   如果文 ...

  2. DOJO dataGrid 单击单元格选中行

    onCellClick: lang.hitch(this, function(event){ //单元格单击事件 var grid = dijit.byId("__geodisa_grid& ...

  3. 深入浅出学Java-HashMap

    一.概要 HashMap在JDK1.8之前的实现方式 数组+链表,但是在JDK1.8后对HashMap进行了底层优化,改为了由 数组+链表+红黑树实现,主要的目的是提高查找效率. 如下图所示: JDK ...

  4. Nuxt/Vue自定义导航栏Topbar+标签栏Tabbar组件

    基于Vue.js实现自定义Topbar+Tabbar组件|仿咸鱼底部凸起导航 最近一直在倒腾Nuxt项目,由于Nuxt.js是基于Vue.js的服务端渲染框架,只要是会vue,基本能很快上手了. 一般 ...

  5. SpringCache整合Redis

    之前一篇文章 SpringBoot整合Redis 已经介绍了在SpringBoot中使用redisTemplate手动 操作redis数据库的方法了.其实这个时候我们就已经可以拿redis来做项目了, ...

  6. MySQL 日志详解

    一.MySQL 日志分类 MySQL 日志主要包含:错误日志.查询日志.慢查询日志.事务日志.二进制日志. 错误日志: -log-err (记录启动.运行.停止 MySQL 服务时出现的信息) 查询日 ...

  7. 关于keytool和jarsigner工具签名的使用小结

    在我们日常Android应用开发中,我们都要对我们开发的apk做签名处理,或者加固,增强我们apk的安全性,防止被逆向反编译,在apk签名这块,我们一般采用JDK自动工具来签名,下面就对相关工具做个简 ...

  8. docker的run操作

    docker的run到底做了什么操作呢? 它会优先寻找本地的镜像,如果没有就到仓库找,找不到返回错误,查找不到该镜像.能找到就拉这镜像下来,以该镜像为模板生产容器实例运行. 备注:图不是自己画的,截图 ...

  9. select函数详解(转)

    Select函数在Socket编程中还是比较重要的,可是对于初学Socket的人来说都不太爱用Select写程序,他们只是习惯写诸如connect. accept.recv或recvfrom这样的阻塞 ...

  10. 多测师讲解接口测试 _报错_高级讲师肖sir