集腋成裘-02-css基础-01
CSS 层叠样式表(Cascading Style Sheets)(级联样式表)
1 选择器
1.1 写法
选择器是一个选择标签的过程. 选择器{属性:值;...}
1.2 基础选择器
标签选择器
类选择器
ID选择器
通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*标签选择器*/
span{
font-size:200px;
}
/*类选择器*/
.G{
color: #;
}
.o{
color: #;
} .e{
color: #;
}
.l{
color:#;
}
/*id选择器*/
#o{
color: orange;
}
#g{
color: #;
} </style>
</head>
<body>
<span class="G">G</span>
<span class="o">o</span>
<span id="o">o</span>
<span id="g">g</span>
<span class="l">l</span>
<span class="e">e</span>
</body>
</html>
基础选择器
1.3 符合选择器
交集选择器:标签.类/ID选择器 div.box
后代选择器:选择器 选择器 div.box div.div1
子代选择器:选择器>选择器 div.box>div.div1
并集选择器:标签,标签 div.box div.div1 p,p
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* "."是交集
" "是后代
","是并集*/
div.div1 ul.box li,div.div1 p{
color:red;
}
</style>
</head>
<body>
<div class="div1">
我是div中元素
<p>
我是div中的p
<ul class="box">
<li>我是li中元素</li>
</ul>
<ul>
<li>我是li中元素</li>
</ul>
</p>
</div> <div>
我是另一个div中元素
<p>我是div中的p标签</p>
</div>
</body>
</html>
test1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* "."是交集
" "是后代
","是并集*/
div.box p.p1, div.box div.div1 p,p{
color:red;
}
</style>
</head>
<body>
<div class="box">
我是div中元素
<p>
我是div中的p
<p class="p1">
我是div中的p
</p>
</p>
<p>
<div class="div1">
<p>我是p</p>
</div>
</p>
</div> <div>
我是另一个div中元素
<p>我是div中的p标签</p>
</div>
</body>
</html>
Test2
1.4 font属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
font-weight: ;
font-style: italic;
font-size:16px;
line-height: 40px;
font-family: 微软雅黑;
}
div{
font:italic 16px/40px 微软雅黑 ;
}
</style>
</head>
<body>
<div>
我是另一个div中元素
<p>我是div中的p标签</p>
</div>
</body>
</html>
1.5 小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.content{
width:800px;
margin: auto;
}
.content h1{
font: 28px 微软雅黑;
text-align: center;
}
.content .box{
text-align: center; }
.spanTime .spanNews{
font-size: 14px;
}
.spanTime{
color:rgb(,,);
}
.spanNews{
color:#;
}
.box input[type=text]{
color:red;
}
.box input[type=button]{
color:green;
font-weight: ;
}
.content p{
text-indent: 2em;
line-height: 24px;
} .content p span{
color:blue;
}
</style>
</head>
<body>
<div class="content">
<h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
<div class="box">
<span class="spanTime">2014年07月16日20:</span> <span class="spanNews"> 新浪体育 评论中大奖（11人参与）</span>
<a href="#"> 收藏本文</a>
<input type="text" value="请输入查询条件" >
<input type="button" value="搜索">
</div>
<hr>
<p>新浪体育讯 7月16日是燕京啤酒<span>[微博]</span>2014中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p> <p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p> <p>据记者多方了解的情况，李虎<span>[微博]</span>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p> <p>这样的情况并没有影响到丽江嘉云昊队<span>[微博]</span>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong></p>
</div>
</body>
</html>
集腋成裘-02-css基础-01的更多相关文章
- CSS基础(01)
1. Css基础 1.1 CSS(层叠样式表 Multiple Styles) CSS 是 Cascading Style Sheets(层叠样式表)的简称. CSS 语言是一种标记语言,它不需要 ...
- CSS基础01
1.line-height:设置每行的高度,默认是会以文字的高度来决定 2.text-align:设置文本的对齐方式 3.vertical-align: sub 垂直对齐文本的下标. super 垂直 ...
- css基础--常用css属性02
上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1 浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...
- # 095 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 03 封装总结 01 封装知识点总结
095 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...
- 094 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 04 static关键字（续）
094 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...
- 093 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 03 static关键字（下）
093 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...
- 092 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 02 static关键字（中）
092 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...
- 091 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 01 static关键字（上）
091 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...
- 090 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 04 使用包进行类管理（2）——导入包
090 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...
- 089 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 使用包进行类管理（1）——创建包
089 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...
随机推荐
- python练习 之 实践出真知 中心扩展法求最大回文子串 （leetcode题目）
1 问题,给定一个字符串,求字符串中包含的最大回文子串,要求O复杂度小于n的平方. 首先需要解决奇数偶数的问题,办法是:插入’#‘,aba变成#a#b#a#,变成奇数个,aa变成#a#a#,变成奇数个 ...
- C++中，有哪4种与类型转换相关的关键字？各有什么特点？应该在什么场合下使用？
转:https://www.cnblogs.com/mjiang2017/p/9358032.html C++中,四个与类型转换相关的关键字:static_cast.const_cast.reinte ...
- 20165337 2017-2018-2《Java程序设计》课程总结
一.每周作业链接汇总 预备作业一:我期望的师生关系 简要内容: 读完文章的感想 我印象深刻的老师 我期望的师生关系 预备作业二:学习基础和C语言基础调查 简要内容: 你有什么技能比大多人(超过90%以 ...
- Workbook导出excel封装的工具类
在实际中导出excel非常常见,于是自己封装了一个导出数据到excel的工具类,先附上代码,最后会写出实例和解释.支持03和07两个版本的 excel. HSSF导出的是xls的excel,XSSF导 ...
- oracle查询语句 select a||','||b||','||c from table where a in('m','n')
查询table表中 字段a = m 或 n 时,a列,b列,c列的值,并且这三列之间用 ","(逗号)分割. 追问:连接符的作用呢?就是显示的时候链接abc和中间的逗号么?追答:| ...
- RabbitMQ四种交换机类型介绍
RabbitMQ 原文地址: https://baijiahao.baidu.com/s?id=1577456875919174629&wfr=spider&for=pc 最新版本的 ...
- CAN总线芯片SN65HVD230QD介绍
CAN总线硬件电路如上,采用芯片为SN65HVD230QD,从TI获得的芯片手册,可知该芯片参数为: 3.3V供电 低电流为370uA典型值
- motor helper
# -*- coding: utf-8 -*- # @Time : 2019-02-13 10:44 # @Author : cxa # @File : mongohelper.py # @Softw ...
- 视觉SLAM之词袋（bag of words） 模型与K-means聚类算法浅析
原文地址:http://www.cnblogs.com/zjiaxing/p/5548265.html 在目前实际的视觉SLAM中,闭环检测多采用DBOW2模型https://github.com/d ...
- jquery获取浏览器URL参数
getRequestParams:function(param){ var reg = new RegExp("(^|&)" + param + "=([^&am ...