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. Android小部件Widget开发过程中的坑和总结

    @ 目录 概述 官方参考 效果图 AndroidManifest.xml Receiver Service Options res/xml/ widget_desktop_options.xml 常用 ...

  2. Python-开发规范-遵循PEP8规范

    Python中空白 1. 4个空格表示缩进,用4个空格代替一个TAB 2. 不再逗号.分号.冒号前加空格,应该在其后加空格 3. 关系运行符.数学运算符.逻辑运算符.赋值运算符 前后都加一个空格 4. ...

  3. [Angular JS教程] HeroService: getHeroes failed: undefined 问题解决方法

    最近在学习入门Angular JS,学习资源是https://angular.cn/tutorial, 在学习到 "https://angular.cn/tutorial/toh-pt6模拟 ...

  4. Spring中用@DependsOn注解控制Bean的创建顺序

    1. 概述 Spirng容器自己会管理bean的生命周期和bean实例化的顺序,但是我们仍然可以根据我们自己的需求进行定制.我可以可以选择使用SmartLifeCycle接口,也可以用@Depends ...

  5. Java知识系统回顾整理01基础04操作符01算术操作符

    一.算数操作符类别 基本的有: + - * / % 自增 自减: ++ -- 二.基本算数操作符 + - * / 基本的加 减 乘 除 public class HelloWorld { public ...

  6. #error: Building MFC application with /MD[d] (CRT dll version) requires MFC shared dll version. Please #define _AFXDLL or do not use /MD[d]

    转载:https://www.cnblogs.com/cvwyh/p/10570920.html 错误 在使用VS编译文件时出现了如下错误: #error: Building MFC applicat ...

  7. 为了省钱，我用1天时间把PHP学了！

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 你在通往架构师的路上吗? 程序员这个行业就像是在不断的打怪升级,突破每一阶段的瓶颈期 ...

  8. Vue学习 一 环境搭建

    Vue  ui  启动 创建一个新项目 包管理器 npm Bable 转换js 至低版本的支持(兼容低版本) TypeScript  对TypeScript  的支持  (暂时不需要) PWA    ...

  9. 多测师讲解内置函数 _format_高级讲师肖sir

    #python中的格式化输出:format()# 和%号格式化输出一样,是%号的另外一种格式#1.不设置指定位置,按默认顺序 a ='{}'.format('hello','nihao','dajia ...

  10. Gradle的构建过程都不会？带你全面了解Android如何自定义Gradle 插件

    目前 Android 工程的默认构建工具为 Gradle,我们在构建 APK 的时候往往会执行 ./gradlew assembleDebug 这样的命令.. 那么这个命令到底代表着什么含义呢?命令的 ...