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】04-我偷偷改了你编译后的class文件
[jvm]04-我偷偷改了你编译后的class文件 欢迎关注b站账号/公众号[六边形战士夏宁],一个要把各项指标拉满的男人.该文章已在github目录收录. 屏幕前的大帅比和大漂亮如果有帮助到你的话请 ...
- centos6.5-搭建Apache-地址限制和用户访问
对于企业内部的WEB管理平台,例如日志分析系统(Awstats)为了更好实现访问控制,在通过客户端访问时,提交一些用户密码或对客户IP地址进行授权,避免服务器的安全隐患. 常见的访问控制方式:应用于配 ...
- Bom 基本使用以及定时器 倒计时案例
BOM 是浏览器对象模型 它提供了独立内容而与浏览器窗口进行交互的对象,其核心对象是window 窗口加载事件 注意:window.onload 就可以吧JS代码写在页面元素的上方,因为onload是 ...
- ':app@debug/compileClasspath': Could not find any version that matches com.android.support:appcompat-v7:30.+.
ERROR: Unable to resolve dependency for ':app@debug/compileClasspath': Could not find any version th ...
- 实验 7 : OpenDaylight 实验 —— Python 中的 REST API 调用
实验 7 : OpenDaylight 实验 -- Python 中的 REST API 调用 一.实验 目的 对 Python 调用 OpenDaylight 的 REST API 方法有初步了解. ...
- Go语言系列之反射
变量的内在机制 Go语言中的变量是分为两部分的: 类型信息:预先定义好的元信息. 值信息:程序运行过程中可动态变化的. 反射介绍 反射是指在程序运行期对程序本身进行访问和修改的能力.程序在编译时,变量 ...
- POJ3090Visible Lattice Points
http://poj.org/problem?id=3090 对于此题,观测点的数目,从小规模开始观察,可以得到每一个点,由一根无限长的绳子,绕着原点旋转,得到的第一个点.换另外一个思路,每一个观察到 ...
- 一文搞定 Windows Terminal 设置与 zsh 安装 (非WSL)
为 Windows Terminal 添加标签页 添加 Anaconda 标签页 在settings.json文件中的list列表中添加设置项: { // Make changes here to t ...
- eclipse中配置Webdriver
安装JDK,配置好Java环境 下载Eclipse,并完成安装 下载Webdriver的JAR文件(访问Selenium官网,下载Java版的zip文件,并且解压到本地磁盘,解压后文件夹内容如下图:) ...
- 网络协议学习笔记(五)套接字Socket
概述 前面学习网络知识的时候写过一篇关于套接字的随笔见<JAVA SOCKET 详解>,现在本人正在系统的学习网络知识,现在除了温故知新之外,在详细的学习记录一下套接字的知识. Socke ...