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/ ...
随机推荐
- Mybatis 插件原理解析
SqlSessionFactory 是 MyBatis 核心类之一,其重要功能是创建 MyBatis 的核心接口 SqlSession.MyBatis 通过 SqlSessionFactoryBuil ...
- keepass+坚果云管理我的密码
目录 前言 下载安装KeePass 创建一个数据库 配置坚果云 手机用坚果云 总结 前言 KeePass是一款免费.小巧.绿色且开源的密码管理工具,多年来一直深受大众的好评,它能为用户提供一个 ...
- GetDlgItem（函数详解）
转载: https://blog.csdn.net/hk121/article/details/80942850 hwndScroll = GetDlgItem(hwnd, IDC_SCROLL); ...
- DevOps元素周期表——1号元素 Gitlab
DevOps元素周期表--1号元素 Gitlab GitLab 是由 GitLab Inc.开发,一款基于 Git 的完全集成的软件开发平台(fully integrated software dev ...
- Error: Module did not self-register报错解决
最近在做node升级过程中发现拉起一个引用到底层c++ addon动态库时,报如下错误 [root@Test dynamiclibs]# node test-all.js module.js:664 ...
- CN1，CN2 GT和CN2 GIA的区别
用一句话来概括,CN1主要定位于承载普通质量的互联网业务,而CN2则定位于承载企业VPN业务.中国电信的自营业务及高质量的互联网业务,CN2 GIA又比GT要好一些. 顺序:CN2 GIA>CN ...
- Python基础笔记1-Python读写yaml文件（使用PyYAML库）
最近在搭建自动化测试项目过程中经常遇到yaml文件的读写,为了方便后续使用,决定记下笔记. 一,YAML 简介 YAML,Yet Another Markup Language的简写,通常用来编写项目 ...
- 多测师讲解python_模块间的调用_高级讲师肖sir
案例1: 在aaa.py 文件A类中定义一个函数sadp: 在bbb.py文件中导入aaa模块,导入类 ,调用函数 案例2: aaa模块中定义一个A类, 在定义一个sadp的函数, 在bbb模块中导 ...
- ansible2.4安装和体验
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- ffmpeg实现视频文件合并/截取预览视频/抽取音频/crop(裁剪)(ffmpeg4.2.2)
一,ffmpeg的安装 请参见: https://www.cnblogs.com/architectforest/p/12807683.html 说明:刘宏缔的架构森林是一个专注架构的博客,地址:ht ...