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>所译,整个译文带有 ...
随机推荐
- 【jvm】05-为什么你写的代码有时候和预期不一致
[jvm]05-为什么你写的代码有时候和预期不一致 欢迎关注b站账号/公众号[六边形战士夏宁],一个要把各项指标拉满的男人.该文章已在github目录收录. 屏幕前的大帅比和大漂亮如果有帮助到你的话请 ...
- Java基础寒假作业-个人所得税计算系统
<个人所得税计算系统>设计 一.需求说明 设计一个简易的个人所得税计算系统,通过输入个人应发工资计算出各个地区的三险(医疗保险.养老保险)一金(公积金)和个人所得税.系统需要实现用户登录. ...
- 编写Java程序,创建一个 XML 文档,文档名为“hero.xml”,用于保存“王者荣耀”的英雄信息。
查看本章节 查看作业目录 需求说明: 创建一个 XML 文档,文档名为"hero.xml",用于保存"王者荣耀"的英雄信息.英雄信息包括编号(id).姓名(na ...
- Java Swing设计简单商品信息管理系统(java swing+mysql+eclipse)
一.概述 为了管理好商店库存信息,提升店铺管理工作效率,结合实际工作需要,设计和开发本系统,主要用于商店商品信息维护出入库等.包含商品库存信息查看.商品信息修改,新增商品信息,删除信息等功能. 二.功 ...
- [Atcoder Regular Contest 071 F & JZOJ5450]Neutral
题目大意 一个无限长的序列\(a\), 需要满足 1.数列中的每一个数在\(1\)到\(n\)之间. 2.对于\(i>=n, j>=n\), \(a_i=a_j\). 3.对于\(i< ...
- 微服务探索之路01篇.net6.0项目本地win10系统docker到服务器liunx系统docker的贯通
本文介绍从创建 net6.0 项目运行在 windows 开发环境的 docker 然后正式部署至 liunx 服务器. 1 windows10 安装 docker 下载docker-desktop ...
- boot项目打包剔除配置文件(打包优化)
背景: 最近在项目开发中,在本地开发和线上部署的时候总是切换dev和pro环境,项目多了改起来还是很麻烦的,以下记录下boot项目的打包优化,打包的时候剔除配置文件,然后将配置文件手动放到线上,线上项 ...
- 18张图,详解SpringBoot解析yml全流程
原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 前几天的时候,项目里有一个需求,需要一个开关控制代码中是否执行一段逻辑,于是理所当然的在yml文件中配置了一个属性作为开关,再配合nacos就可 ...
- CSS3 动画3D视角下 旋转圆环
首先是 transform 属性: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 加上对应属性则可得到3D透视效果下的形态 本次以圆形( ...
- docker镜像制作及发布
以centos为例. 主要内容:安装docker,制作镜像,发布镜像. 安装docker 1. 安装docker yum install -y docker 等待一会,安装成功,查看安装列表 2. 启 ...