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>所译,整个译文带有 ...
随机推荐
- 万能密码:‘or 1=1-- 实战SQL注入,秒破后台
主要是没有对登录密码的字符串进行参数化和过滤,所以导致网站可以直接用"万能密码"进行突破登录 仅供学习交流 这是某同学做的网站,今天无聊打开了,并帮他进行测试一下 看到这个后台,感 ...
- Android开发布局 案例一
权重:就是在布局界面中所占的比例 实践案例: <?xml version="1.0" encoding="utf-8"?> <LinearLa ...
- Foxmail:‘错误信息:由于连接方在一段时间后没有正确答复或连接的主机没有反应,连接尝试失败’的解决办法
每日必开-Foxmail 但是有连续半个多月未收到1封邮件 心想 大过年的 大家都不发邮件了 么 并未特别在意 直到该接收工资条的日子 我的Foxmail依然毫无动静 点了一下 收取 结果报如下错误: ...
- Nginx 管理可视化神器!通过界面完成配置监控,一条龙
作者:Posted 来源:https://leanote.zzzmh.cn/blog/post/5cc7f63616199b068300001c https://mp.weixin.qq.com/ ...
- LINUX学习-Mysql安装
一.安装环境 操作系统CentOS6.8 关闭SeLinux和iptables防火墙 二.网络yum源 将下面的软件下载到 /etc/yum.repos.d/ 的目录下 官方基础:http:// ...
- 微信小程序配置域名的时候提示“校验文件验证失败”
在微信小程序后台配置web-view的业务域名跟扫普通链接二维码打开小程序两项功能时, 一直提示"校验文件验证失败,请下载校验文件,上传到服务器指定的目录" 实际访问校验文件的路径 ...
- 《剑指offer》面试题09. 用两个栈实现队列
问题描述 用两个栈实现一个队列.队列的声明如下,请实现它的两个函数 appendTail 和 deleteHead ,分别完成在队列尾部插入整数和在队列头部删除整数的功能.(若队列中没有元素,dele ...
- 论文翻译:2019_TCNN: Temporal convolutional neural network for real-time speech enhancement in the time domain
论文地址:TCNN:时域卷积神经网络用于实时语音增强 论文代码:https://github.com/LXP-Never/TCNN(非官方复现) 引用格式:Pandey A, Wang D L. TC ...
- [GKCTF2020]EZ三剑客-EzNode&[GYCTF2020]Ez_Express
写在前面 Nodejs基础一点没有做题还是很难下手的,要学的还很多 [GKCTF2020]EZ三剑客-EzNode 知识点 1.settimeout溢出 2.沙盒逃逸 题解 打开题目,看源代码 app ...
- MacBookPro2021 M1-MAX电脑问题锦集
MacBook2021 M1-MAXPro电脑问题锦集 问题1: 开启硬盘加密,开机闪屏 问题详述: 在系统偏好设置中,打开安全与隐私,在弹出窗口中切换到第二个页签(文件保险箱),启用文件保险箱功能, ...