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. Linux常用命令代码大全

    arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 – (SMBIOS / DMI ...

  2. nessus 本地扫描（一）

    第一次使用nessus ,so 适合小白看看 1.新建扫描.配置策略:起个名字,description是详细记录,类似于说明:targets是要访问的主机ip地址或者网段,必填项   选择好之后sav ...

  3. Spring的BeanFactory是什么？

    什么是BeanFactory? 提到Spring,总是让人第一时间想起IOC容器,而IOC容器的顶层核心接口就是我们的BeanFactory,如果能够理解BeanFactory的体系结构想必能让我们对 ...

  4. JWT安全性第1部分，创建令牌

    下载Demo Core 2.0 - 13.2 MB 下载Demo Core 1.2 - 14 MB 介绍 JWT (JSON Web Token)作为保护Web站点和REST服务的标准越来越流行.我将 ...

  5. EDI模拟实验

    EDI模拟实验 [实验目的] ⑴.了解EDI报文的格式和特点. ⑵.掌握EDI报文生成和发送流程. [实验条件] ⑴.个人计算机一台,预装Windows XP操作系统和浏览器 ⑵.计算机通过局域网形式 ...

  6. 多测师讲解自动化_rf框架搭建_高级讲师肖sir

    robot framework:自动化测试框架(简称RF框架) Python3.7 RIDE(可视化界面).  Wxpython  pip(在线下载) . setuptools(在线安装) . 第三方 ...

  7. Android开发还不会这些？如何面试拿高薪！

    我所接触的Android开发者,百分之九十五以上 都遇到了以下几点致命弱点! 如果这些问题也是阻止你升职加薪,跳槽大厂的阻碍. 那么我确信可以帮你突破瓶颈! 群内有许多来自一线的技术大牛,也有在小厂或 ...

  8. day16 Pyhton学习

    1.range(起始位置) range(终止位置) range(起始,终止位置) range(起始,终止,步长) 2.next(迭代器) 是内置函数 __next__是迭代器的方法 g.__next_ ...

  9. python接口测试之读取配置文件

    1.python使用自带的configparser模块用来读取配置文件,配置文件可以为.conf或.ini结尾 在使用前需要先安装该模块,使用pip安装即可 2.新建一个名为a.conf的配置文件 a ...

  10. docker启动服务---------------nginx+php

    环境 首先安装Docker,无论你是Windows还是Linux.MocOS都可以.安装Docker自行百度. Docker镜像源 访问https://hub.docker.com即可,它是镜像大仓库 ...