CSS:第1课
CSS选择器有:id选择器、派生选择器

1、id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
2、派生选择器
在现代布局中,id 选择器常常用于建立派生选择器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
3、类选择器
class选择器通常用点号(.)来显示
4、属性选择器
二、CSS中的样式优先级
内联样式 <style font-size="16px">
内部样式表 <style type="text/css">......</style>
外部样式表 <link rel="stylesheet" type="text/css" href="mystyle.css" />
精确匹配大于模糊匹配
1、id选择器
2、class类选择器
3、span标签选择器
4、*
注明:谁离标签近,谁的优先级就最高。同等水平时,比较精确。
三、CSS选择器主要有以下10类
1、通配选择器:*{margin:0px;}
2、类型选择器:a{text-decoration:none;}
3、属性选择器:input[type="button"]{padding:5px;}
4、包含选择器:div.code a{text-decoration:none;}
5、子对象选择器:ul.test>li{font-size:14px;}
6、ID选择器:#test {color:red;}
7、类选择器:.test{color:red;}
8、选择器分组:body,ul,li{margin:0px;}
9、伪类及伪对象选择器:div:first-letter{font-size:16px;}、a.test:hover{text-decoration:underline;}
10、相邻选择器:li+li{font-weight:bold;}
四、
CSS:第1课的更多相关文章
- CSS前5课总结
CSS<精通CSS.DIV网页样式与布局>视频前5课总结: 地对地导弹 第一课: 使用CSS控制页面: 1,行内样式 <p style="color:#0000FF; fo ...
- 妙味课堂——HTML+CSS(第四课)(一)
这一课学的东西真是太多了,还不赶快记下来,留待以后慢慢回味! 首先我们回顾一下inline-block的特性: 使块元素在一行显示 使内嵌支持宽高 换行被解析了(问题) 不设置宽度的时候,宽度由内容撑 ...
- [Codecademy] HTML&CSS 第三课:HTML Basic II
本文出自 http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...
- [Codecademy] HTML&CSS第八课:Design a Button for Your Webwite
本文出自 http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...
- 妙味课堂——HTML+CSS(第四课)(二)
单开一篇来讲一个大点的话题——清浮动 来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...
- 妙味课堂——HTML+CSS(第三课)
常见标签我已经在上一篇文章中提及,我们做前端设计时,主要也是用这些标签(最常用的). 然而有一个问题,就是有的标签都有自己的默认样式.试通过如下代码来说明: <!DOCTYPE html> ...
- [Codecademy] HTML&CSS 第七课:CSS: An Overview
本文出自 http://blog.csdn.net/shuangde800 [Codecademy] HTML && CSS课程学习目录 --------------------- ...
- 潭州课堂25班:Ph201805201 WEB 之 CSS 第三课 (课堂笔记)
在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层 边框 border border-top: 5px solid black; /*上边框 实线*/ border-right: 3px do ...
- html+css web storage课上笔记 2019.3.18
存储 cookie cookie 使用文本来存储信息 使用时服务器发送cookie给客户端,下一次时,浏览器发送给服务器 web storage local storage 本地的硬件设备中,关闭后不 ...
- HTML和CSS高级指南——定位详解
本文由大漠根据Shay Howe的<An Adavnced Guide to HTML & CSS>第二课<Detailed Positioning>所译,整个译文带有 ...
随机推荐
- centos6.5-Apache优化
Apache的网页压缩功能 一.配置网页压缩功能 在配置压缩功能以前访问网页的响应头部 Response Headers view source Accept-Ranges:bytes Connect ...
- .NET C#教程初级篇 1-1 基本数据类型及其存储方式
.NET C# 教程初级篇 1-1 基本数据类型及其存储方式 全文目录 (博客园).NET Core Guide (Github).NET Core Guide 本节内容是对于C#基础类型的存储方式以 ...
- Android8 以上使用 UIautomator Viewer提示Unexpected error while obtaining UI hierarchy报错(方法二)
一:最常见的一个问题就是:Android8及以上的系统无法获取到页面,提示报下面的错误 二:解决办法 1.下载新的tools,在下面链接里找到SDK tools下载 http://www.androi ...
- python 面向对象:封装---对象的属性可以是另一个类创建的对象
# 对象封装:对象的属性可以是另一个类创建的对象 # 案例需求: # 1.士兵许三多有一把AK47 # 2.士兵用枪射击标靶 # 3.枪能装填和发射子弹 class Gun: # 分析: # 枪的属性 ...
- 封装OCX
封装OCX的办法有2种: 1. 使用C++的MFC activex项目生成OCX 2. 使用C#的用户控件生成OCX(.net core好像不支持) 注意:以管理员身份运行Visual Studio ...
- vivo推送平台架构演进
本文根据Li Qingxin老师在"2021 vivo开发者大会"现场演讲内容整理而成.公众号回复[2021VDC]获取互联网技术分会场议题相关资料. 一.vivo推送平台介绍 1 ...
- 自从学会了VBA字典,VLOOKUP都不那么香了
上篇博文中,小爬曾多次为VBA字典带货.鼓励多用字典,可以让我们的VBA脚本工具执行更快.今天小爬来细聊一下VBA字典的具体应用!如果你有一定VBA基础,那么看完你一定会对VBA字典有全新的认识:如果 ...
- 【记录一个问题】thinkpad x1笔记本,安装ubuntu 16后,拔掉U盘,总是启动到windows,无法启动到ubuntu
如题 昨天使用ubuntu 18没有这个问题 ============================= 12:38 1.安装完成出现重启后,一定要拔掉U盘 2.BIOS里面的security boo ...
- Windows和Linux(Centos7)下安装Nginx
安装Nginx 这篇记录只不过做了一个简单总结,如果对这块没什么概念的话可以看一下知乎的这篇文章 https://zhuanlan.zhihu.com/p/83890573 window下安装 win ...
- 为什么 Redis 的查询很快, Redis 如何保证查询的高效
Redis 如何保证高效的查询效率 为什么 Redis 比较快 Redis 中的数据结构 1.简单动态字符串 SDS 对比 c 字符串的优势 SDS可以常数级别获取字符串的长度 杜绝缓冲区溢出 减少修 ...