《Two Days DIV + CSS》读书笔记——CSS选择器

CSS读书笔记（1）---选择器和两列布局

(1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red"></div> 作者编写的CSS文件 <link href='xx.css'> 用户浏览网页在浏览器中设置的样式浏览器默认的样式对于ID选择器.类选择器等,其优先级从大到小分别是: 直接在标签中写入样式<div style="color:red"&g…

CSS学习笔记之选择器

目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素选择器最常见的 CSS 选择器莫过于元素选择器,换言之,HTML 文档中的元素是最基本的选择器 body {color:black;} h1 {color:gray;} p {color:white;} 2.继承根据 CSS 规则,子元素将会继承最高级元素所拥有的属性.例如,如果在 body 元…

css读书笔记2：css工作原理

css就是一种先选择html元素,然后设定选中元素css属性的机制.css选择符合要应用的样式构成一条css规则. 为文档添加样式的3种方法: 1.行内样式,直接写在特定标签的style属性中:2.嵌入样式,在head元素中嵌入<style type="text/css"></style>,将css规则放入<style>和</style>中:3.链接样式,在<head>元素中使用外部的样式表,如:<link href=&…

JS框架设计读书笔记之-选择器引擎01

选择符选择符是指CSS样式规则最左边的部分,例如 p{},#id{},.class{},p.class{} 等等总共可以分为四大类: 并联选择器 => 逗号 => $('div,span') 简单选择器 => ID,CLASS,TAG,ATTR,* => $('#id'),$('.class'),$('div'),$('[attr]'),$('*') 关系选择器 => ' '.'>'.'+'.'~' => $('div span').$('div>spa…

Html和Css学习笔记-css进阶-盒模型

我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签,元素,属性的具体意义. 这里所介绍的html和css的版本为html5与css3 Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言 Css是层叠样式表(英文全称:Cascading Style Sheets)是…

《Two Days DIV + CSS》读书笔记——CSS选择器

1.1.2 CSS选择器 CSS 选择器最基本的有四种:标签选择器.ID 选择器.类选择器.通用选择器. [标签选择器] 一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的 CSS 样式,比如,在 style.css 文件中对 p 标签样式的声明如下: <span style="font-family:Microsoft YaHei;font-size:14px;">p {</span> font-size: 12px; b…

[读书笔记] CSS权威指南1: 选择器

通配选择器可以与任何元素匹配,就像是一个通配符 /*每一个元素的字体都设置为红色*/ * { color: red; } 元素选择器指示文档元素的选择器. /*为body的字体设置为红色*/ body { color: red: } 分组选择器分组 h1, h2, h3 { color: red; } 声明分组 h1 { font: 18px Helvetica; color: purple; background: aqua; } 结合选择器和声明分组 h1, h2, h3 { font…

《Two Days DIV + CSS》读书笔记——CSS控制页面方式

1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握的基础 1.2.1 CSS如何控制使用 xHTML+CSS 布尿页面,其中有个很重要的特点就是结构与表现相分离,结极指 xHTML 页面代码,表现就是 CSS 代码了,如果把一个网页看成穿着衣服癿人癿话,人就是 xHTML,是结构,而衣服呢就是 CSS,是表现,现在出现的问题是,如何让 CSS 去…

别具光芒Div CSS 读书笔记（一）

继承边框(border).边界(margin).填充(padding).背景(background) 是不能继承的. table 中td不会继承body的属性,因此需要单独指定. 权重 p {color:black;} /*权重为:1*/ p em {color:yellow;} /*权重为:2*/ p .note em .dark{color:gray;} /*权重为:22*/ #main{color: black;} /*权重为:100*/ p{color:red !impo…

[读书笔记] CSS权威指南2: 结构和层叠

层叠样式表中最基本的一个方面可能就是层叠——冲突的声明要通过这个层叠过程排序,并由此确定最终的文档表示.这个过程的核心是选择器及其相关声明的特殊性,以及继承机制. 特殊性对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明.如果一个元素有两个或多个冲突的属性声明,那么有最高特殊性的声明就会胜出. 选择器的特殊性由选择器本身的组件确定.特殊性值表述为4个部分,如:0,0,0,0.一个选择器的具体特殊性如下确定: 对于选择器中给定的各个ID属性值,加0,1,0,0. 对…

精通CSS version2笔记之⒈选择器

1.常用的选择器:①元素选择器指定希望应用样式的元素.比如:p {color:#fff;}②后代选择器寻找特定元素或者元素的后代. 比如:body p{color:#ccc;} 这个选择器和子选择器body>p的区别是:body>p是指body下作为子元素的所有节点P,而后代选择是body下面所有的节点P,可以说子元素选择器是一种特殊的后代选择器. ③类选择器指定特定的类应用样式比如.a{color:#ccc;} 类选择器命名最好根据…

CSS学习笔记(1):选择器

一.元素选择器 HTML文档元素就是最基本的选择器如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> p {color:blue;} </style> </head> &…

CSS 小结笔记之选择器

Css选择器主要分为以下几类类选择器 ID选择器通配符选择器标签选择器伪类选择器复合选择器 1.类选择器:通过.classname 来选择例如 .color2 { color: rebeccapurple; } 同一个标签可以通过多个类名来指定多个样式,但是若其中有重叠部分,则按权重值重叠,若在同一权重级别中,如都是内部样式表中的,则按照上下关系,下面的覆盖上面的. 例如: .classtest1 { font-size: 25px; color: blue; } .classtes…

CSS读书笔记（2）---简易相册和日历表的制作

一.HTML和CSS制作的简易相册相册在默认情况下是缩略图显示,而且是截取相片的某一部分显示的.当鼠标停留在某张缩略图上,相册列表中的缩略图变为大图,展示在相册的左边区域, 同时缩略图部分变成空的效果图如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS相册</title> <styl…

CSS学习笔记——CSS选择器样式总结

《Web前端开发修炼之道》-读书笔记CSS部分

如何组织CSS-分层应用 css 的能力分两部分:一部分是css的API,重点是如何用css控制页面内元素的样式:另一部分是css框架,重点是如何对 css 进行组织.如何组织 css 可以有多种角度,例如按功能划分,或者按区块划分.这里讲一下 base.css + common.css + page.css 的组织方法.将网站内的所有样式,按照职能分成三大类:base.common.page,这三者是层叠结构. 1.base 层-精简通用位于三者的最底层,提供 css reset 功能和粒…

CSS读书笔记（3）---清除浮动的几种方法

浮动元素容易造成页面错位现象.下面说说关于清除浮动的几种方法. 首先.先创建一个浮动导致错位的页面. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS---浮动</title> <style> .float-left{ float: left; width: 200px; height:…

【精通css读书笔记】第八章布局

学习了css布局的基础后又来翻阅<精通css>这本经典书籍,对布局有了进一步的认识. 基于浮动的布局两列的布局仍然是使用一个元素向左浮动,一个元素向右浮动,值得注意的是要加入display:inline 用来防止IE中的双外边距浮动产生的bug. 三列布局与昨天的使用了不同的方法,全部依靠浮动来实现,与两列布局一样先实现主内容与次内容的左右浮动,然后对主内容中的主div与次div在分别浮动. 不要忘记因为元素的浮动需要对父元素清理浮动的处理 overflow:hidden 但是三列布局的时候…

css读书笔记4：字体和文本

字体属性网页中的字体有3个来源:1.用户机器中安装的字体:2.保存在第三方网站上的字体.可以使用link标签把它们链接到页面中:3.保存在子集的web服务器上的字体.可以使用@font-face规则随网页一起发送给浏览器. 与字体样式相关的6个属性:font-family(字体家族.一般对body元素使用,让整个网页使用同样的字体.一般需要多列出几种后备字体,以防前面的字体无效.)font-size(字体大小.)font-style(字体样式.设定字体是斜体还是整正体.)font-weight(…

css读书笔记3：定位元素

定位元素要掌握css技术,核心就是要掌握元素定位. 一般把下面这条规则作为所有css样式表的第一条,初始化所有元素的内边距和外边距都为0: * {padding:0;margin:0;} 盒模型浏览器为页面中的每个元素生成一个矩形盒子.作为该元素的容器.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看到这些盒子. 元素盒子的3个属性:边框(border),可以设置边框的宽窄.样式和颜色:内边距(padding),盒子内容区与边框的间距:外边距(margin),盒子与相邻元素的…

css读书笔记1：HTML标记和文档结构

块级元素和行内元素:块级元素:上下堆叠,每个块级元素都独立占一行.块级元素的盒子宽度与父元素同宽.行内元素:左右堆叠,只有在空间不足的情况下才会折到下一行显示.行内元素的盒子会收缩包裹其内容,并尽可能包紧. 文档对象模型(DOM):把HTML文档中的每个元素当成一个节点,根据元素和元素之间的关系形成一棵树.文档对象模型在CSS中的应用:通过子元素.父元素.同胞元素.祖先元素.后代元素来更方便地定位我们要操作的元素.…

超越css读书笔记

一.运用所有有效的css选择符 1.属性选择符(基于一个元素是否有属性名称,例如href,或者属性值) 例如:img[alt]{border:1px;} 所有包含alt属性的图像都将会有一个灰色的边框 p[class="rant"]{text-transform:uppercase;} 基于属性的内容来格式化一个元素 2.子对象选择符以给所有元素的直属子对象为目标. 由两个或者更多的以>连接符为分隔的选择符组成. 3.相邻选择符 + 它匹配与第一个元素相邻的下一个元素.同时元素…

head First HTML与CSS读书笔记

调整图片大小有滚动条的图片可给不了好的用户体验,为了让图片的大小更适合浏览器窗口.这时候就需要对图片的大小进行调整看书之前.我调整图片大小的方式是在<img>元素使用 width 和 height 属性.书中不建议这样做. 因为这样做仍然会下载完整的大图像,然后让浏览器来完成调整图片大小的工作,而且有些浏览器还不支持这个功能(比如低版本IE)→_→而且增加网页质量.最优的解决方法使用图片处理软件,比如photoshop来调整图片大小,并保存JPEG格式.为什么用JPEG格式?因为JPEG格…

[读书笔记] CSS揭秘-背景与边框

半透明边框默认情况下,背景会延伸到边框所在的区域下层.可以通过background-clip属性调整该默认行为. border: 10px solid rgba(0,0,0,.2) background: blue; background-clip: padding-box; 多重边框 box-shadow box-shadow支持逗号分隔语法,可以创建任意数量的投影. background: yellowgreen; box-shadow: 0 0 0 10px #655, 0 0 0 20…

JS框架设计读书笔记之-选择器引擎02

选择器引擎涉及相关概念概念以Sizzle的主函数声明为例,来说明引擎的相关概念. function Sizzle(selector, context, results, seed) { //... } 种子集seed:如果CSS选择器非常复杂,需要分几步来得到结果,那么第一次得到的元素集合就叫种子集.Sizzle引擎的解析基本上是由右到左,种子集中的一部分就是我们最后得到的元素.如果引擎是由左到右,那么就只是依次查询兄弟与子节点. 结果集results:选择器引擎最终返回的元素集合,约定要与…

Html和Css学习笔记-css基础知识

CSS 学习笔记——CSS Selector

CSS1 中定义的选择器类型选择器用于选择指定类型的元素(其实他就是 html 标签选择器),常见用法如下: body { /*对 body 元素定义样式*/ } body,div { /*同时选择多种标签元素*/ } ID 选择器用于选择指定 ID 的 html 元素,常见使用方法如下: <div id="nav"> </div> <style> #nav { /*定义 ID 为 nav 的元素的样式*/ } </style> 因…

CSS学习笔记——CSS中定位的浮动float

昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么? 第一个问题:浮动到底是怎么样的? W3CSCHOOL对浮动属性的解释:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.所以浮动也有left.right.none三种. 我个人的理解是:HTML 文件就像是一个方形的水槽,它在浏览器中加载的过程就好比是向水槽中放水,而…

CSS学习笔记之基本介绍

1.简介层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下(优先级从小到大排列): 浏览器缺省设置外部样式表内部样式表内联样式 (1)外部样式表当样式需要应用于很多页面时,外部样式表是理想的选择,使用 <link> 标签链接样式表,<link> 标签一般位于 HTML 文档头部 <head> <link rel=&qu…

（6）《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记

1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距——所有内边距会与其他内联元素重叠(即这个内边距在一群内联元素里表现的不是叠加,而是公用一个最大的,而且这个样式效果必须在上下有块元素时才能体现.) 2. header.top img#headerSlogan{ float: right; } 这是一个最佳实践:实际上,这个选择器不需要增加.top也可…

【《Two Days DIV + CSS》读书笔记——CSS选择器】的更多相关文章