Day13 CSS样式
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样式的更多相关文章
- css样式让input垂直居中
css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...
- 深度理解CSS样式表，内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js设置css样式.
在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...
- CSS样式表
CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
- 脚本工具（获取某个文件夹下的所有图片属性批量生成css样式）
问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...
- jQuery所支持的css样式
jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...
- Yii2 assets注册的css样式文件没有加载
准备引入layui.css文件的,在LayuiAssets类中已经配置了资源属性 <?php namespace frontend\assets; use yii\web\AssetBundle ...
- 获取元素计算后的css样式封装
获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
随机推荐
- 修改默认配置文件.android.gradle.androidstudio到其他目录
.android 这个文件夹主要是用来存放模拟器的,是占用空间最大的一个,如果你没有使用它的模拟器,可以直接把这个文件夹删除.因为我建立了两个x86的模拟器,吃掉了我20G的空间.果断搬走. 复制当前 ...
- Java知识系统回顾整理01基础04操作符03逻辑运算符
一.长路与 和 短路与 无论长路与还是短路与 两边的运算单元都是布尔值 都为真时,才为真 任意为假,就为假 区别 长路与 两侧,都会被运算 短路与 只要第一个是false,第二个就不进行运算了 pub ...
- uint16_t
转自:https://blog.csdn.net/kiddy19850221/article/details/6655066 uint8_t / uint16_t / uint32_t /uint64 ...
- 使用 .NET 进行游戏开发
微软是一家综合性的网络公司,相信这点来说不用过多的赘述,没有人不知道微软这个公司,这些年因为游戏市场的回报,微软收购了很多的游戏公司还有独立工作室,MC我的世界就是最成功的的案例,现在市值是排在全世界 ...
- LiteOS-任务篇
目录 前言 链接 参考 笔录草稿 基本概念 任务相关概念 LiteOS 任务运作机制 内核初始化 创建任务 创建任务有两种方案 任务相关函数 任务开发流程 创建创建任务 部分源码 例子 创建任务的任务 ...
- 实现Excel文件的上传和解析
前言 本文思维导图 一.需求描述 实现一个页面上传excel的功能,并对excel中的内容做解析,最后存储在数据库中. 二.代码实现 需求实现思路: 先对上传的文件做校验和解析,这里我们通过Excel ...
- dockerfile构建Tomcat镜像
dockerfile构建Tomcat镜像 一.镜像分层概念 二.制作tomcat镜像 2.1.创建分层目录 [root@node2 ~]# mkdir /app/{web/{nginx,tomcat, ...
- MYSQL账户是否不允许远程连接。如果无法连接可以尝试以下方法：
mysql账户是否不允许远程连接.如果无法连接可以尝试以下方法: mysql -u root -p //登录MySQL mysql> GRANT ALL PRIVILEGES ON *.* TO ...
- docker 升级后或者重装后，启动容器提示：Error response from daemon: Unknown runtime specified docker-runc
之前安装的版本是docker 1.3,并运行了容器jenkins 现在把docker升级版本为docker-ce 19.03 再使用docker ps发现之前的jenkins容器已经退出了 启动容器: ...
- centos初步配置
设置PS1 编辑sudo vi /etc/profile,PS1的值用于控制主提示符格式,含义如下 参数 描述 /d 代表日期,格式为weekday month date,例如:"Mon A ...