css样式

css中选择器的类型和权重大全

萝らか妹 提交于 2020-03-08 00:43:48
1. 选择器的类型和用法: 1.id选择器:#id{属性:属性值} 2.class选器 : .classname{属性:属性值} 3.类选择器: 标签名{属性:属性值} 4. 特殊选择器:特殊选择器是除了上面三大类选择器之外的选择器,包括:群组选择,包含选择器,子元素选择器,伪类选择器 群组选择器:选择符1,选择符2{属性:属性值} 包含选择器(后代选择器):选择符1 选择符2 {属性:属性值} 子元素选择器:选择符1>选择符2{属性:属性值} 伪类选择器: 标签名:后缀{属性:属性值} 例如: a:link{属性:属性值} 2.选择器的权重比较: 类型选择器:0001 class选择器:0010 id选择器: 0100 子元素选择器:0000 伪类选择器: 0010 内联样式权重: 1000 包含选择器权重:包含的选择符权重值之和 注: 通用选择器 用法: {属性:属性值} *{margn:0;padding:0} //去除标签之间的间距 来源: CSDN 作者: 孤浪漂泊 链接: https://blog.csdn.net/jdsfui/article/details/104719839

CSS常用选择器(通配符选择器,标签选择器,类选择器,id选择器.....),你知道多少?

可紊 提交于 2020-03-07 19:26:08
CSS常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,一起来看看吧! 一、通配符选择器 通配符选择器常用 ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面中所有的元素。 基本语法格式:*{ 属性1:属性值1;属性2:属性值2;} 例子 使用该选择器定义样式,清除所有HTML标记的默认边距。 *{ margin:0; /*定义外边距*/ padding:0; /*定义内边距*/ } 但实际开发中不建议使用通配符选择器,因为它设置的样式对所有的HTML标记都生效,不管标记是否需要该样式,反而降低了代码的执行速度。 二、标签选择器 标签选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标签指定统一的CSS样式。 基本语法格式:标签名{ 属性1:属性值1;属性2:属性值2;} 所有的HTML标记名都可以作为标签选择器,例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。 例子 使用p选择器定义HTML页面中所有段落的样式。 p{ font-size: 12px; color: #666; font-family:"微软雅黑"; } 标签选择器最大的优势是能快速为页面中同类型的标签统一样式,同时这也是它的缺点,不能设计差异化样式。 三、类选择器 类选择器使用**‘.’**

如何仿建网站?附带个人博客样式搭建实例

爱⌒轻易说出口 提交于 2020-03-07 13:59:16
本文及技术仅供学习,请勿用于其他用途 更新记录 【1】2020.03.06-16:51 1.完善内容 正文 前言 本教程的博客园样式实例不公布完整css代码,白嫖党请走开,氪金大佬另谈 本教程为初级篇,未涉及JavaScript 我们每天都会在在博客园写博客,看博客,时间久了,未免对这千篇一律的博客皮肤感到烦躁 那能不能想办法更改呢 答案是可以的 有的人可能会问,我自己又没有什么编程基础(那你来博客园干啥awa),更何况不会css,该怎么办呢? 肯定是学习 + 看教程喽 本文就是一篇附带实例的教程 那么,你要做的就是学习 根据个人实际经历来看,我建议你 8天学习HTML(个人实际5天) 8天学习css(个人实际10天) 10天学习JavaScript(个人实际10天) (本人有一定的编程基础) 然后就能达到随心所欲的修改博客园皮肤的水平了 想达到专业水平还是老老实实的学上半年再说吧 好了,回归正题 仿建网站的前提是千万不要侵权,即使是做个皮肤自己欣赏欣赏,也要记得加上原网站的链接 首先你要选择一个你认为满意的网站 然后学习它的源代码 然后自己在博客园码一些css的东西 就这么简单 下面还是让我们边看实例边说话 实例时间 先放张图片感受一下 图1 原网站 图2 个人博客园皮肤 没错,是高仿 首先先让我们来看一下原来的样子 图3 无css 没错,非常磕碜(不磕碜我就不改了awa)

CSS基础选择器

牧云@^-^@ 提交于 2020-03-07 06:50:45
ID选择器 ID 选择器是用 “#” 号加 ID 名称 xxx 来表示,用来选择 HTML 中 id=“xxx” 的 DOM 元素 <span id="content">Hello World</span> #content{ color: red; } 这样 ID 为 content 的元素内容会呈现红色的效果了。 Tips:ID 选择器只能对一个元素生效,同一个页面里不允许出现两个 ID 相同的元素 类选择器 类 选择器是用 “.” 号加 class 名称 xxx 来表示,用来选择 HTML 中class=“xxx” 的 DOM 元素 <ul> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li> </ul> #list-item{ border-bottom: 1px solid #ccc; } 这样列表里所有的项就都有一个宽 1px 灰色的下边框了。 Tips:类选择器会选择到所有类名相同的 DOM 元素,没有数量限制 通配选择器 通配选择器使用星号来选择到页面里所有元素。用法如下: *{ margin: 0; padding: 0; } 上面这个样式就是把所有元素的内外边距都归零,效率较低,一般不建议使用

css引入方式与选择器

帅比萌擦擦* 提交于 2020-03-07 04:10:33
css引入方式 css引入方式一_行内 行内样式: 在HTML标签中添加属性 作用域最小,作用当前标签; 行内样式的优先级最高 <body> <h3 style="color: red;">h3标签</h3> <h3>哈哈</h3> </body> css引入方式二_内部 内部样式: 在HTML页面里面写CSS代码, 一般写在 <head> 中, 使用标签 style , 属性: type="text/css" 作用是当前整个页面有效 <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h3{color: chocolate;} </style> </head> <body> <h3>h3标签</h3> <h3>哈哈</h3> </body> </html> css引入方式三_外部 外部样式: CSS样式定义在另一个文件中,后缀名.css (文本文件) 在HTML页面中,引入样式表, 使用link标签 写在head中 属性: href="css文件路径" | type="text/css" | rel="引入的文件和当前页面是什么关系" 作用范围最大,哪个页面引入,哪个有效 <html> <head> <meta charset="UTF-8"> <title></title>

CSS 引入方式 选择器

情到浓时终转凉″ 提交于 2020-03-07 04:09:31
---恢复内容开始--- CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。 步骤:   A.找到标签 B.操作标签 一 CSS四种引入方式 1.行内式 <p style="background-color: rebeccapurple">hello yuan</p> 2.嵌入式 <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3.链接式 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 4.导入式 将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中,使用的语法如下: <style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径 </style>  注意: 导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷

CSS引入方式,高级选择器

一个人想着一个人 提交于 2020-03-07 04:09:09
css引入方式: 1、内部样式 style标记 在head标记中 应用范围:当前整个页面中应用 2、行内样式 style属性 <p style="color:black; font-size:24px">行内样式</p> 应用范围:指定的标签内应用,优先级高于内部样式 不太推荐用这种方式 3、外部样式 声明:.css样式文件 引入: 链接方式:<link href="css文件" rel="stylesheet" type="text/css"/> 应用:多个页面中共享 优先级: 行间>内部>外部 注:在有相同的样式时,才考虑优先 css高级选择器: 1.后代选择器: 应用在具有嵌套关系的元素上 选择器1 选择器2 ,各个选择器之间用"空格"隔开 2. 交集选择器: 选择器1选择器2,各个选择器直接链接在一起 进一步缩小选择范围 .clCSS 类选择器,应用在任何标记上 p .clCSS 后代选择器,应用在p标记上的子标记中 p.clCSS 交集选择器,应用在p标记上具有class=“clCSS” #p1 .cls :选择id属性为“p1”的标记,再在该标记中选择class 为“cls”的子标记 3.并集选择器: 选择器1,选择器2,选择器3{}; 应用:为不同选择器设置相同的样式 注:其中的选择器是之前学的的任意选择器 继承特性: 具有嵌套关系的标记,外层标记叫父标记

浏览器渲染页面过程

好久不见. 提交于 2020-03-07 03:45:50
渲染过程 1.解析html文件,先是head,后是body 2.如果头部有外部的css链接,就去下载该css,如果有js链接也去下载 3.解析body部分,并生成DOM树,同时浏览器主进程去下载CSS 4.CSS文件下载完成,解析CSS文件成树形的数据结构(CSSOM树),然后结合DOM树合并成RenderObject树 5.布局(layout):布局RenderObject树,负责RenderObject树中的元素的尺寸,位置等计算 6.绘制(painting):绘制RenderObject树,绘制页面的像素信息,绘制到页面上。用户可以看到了 其中,前四步执行的比较快,5.6步执行的比较耗时。这是因为可能会发生回流(也叫重排,reflow。重新执行步骤5)及重绘(repaint,重新执行步骤6)。 重排和重绘到底是啥意思呢?接下来,对以上六个步骤进行详解的同时再解释重排和重绘: 第1.2.3步可以统称为构建DOM树: 当浏览器接收到服务器响应来的HTML文档后,会遍历文档节点,生成DOM树。需要注意的是,DOM树的生成过程中可能会被CSS和JS的加载执行而阻塞。 在这一步完成的时候,可能会发生 渲染阻塞 渲染阻塞 :当浏览器遇到一个 script 标记时,DOM 构建将暂停,直至脚本完成执行,然后继续构建DOM。每次去执行JavaScript脚本都会严重地阻塞DOM树的构建

边框详讲---CSS必备的盒子模型知识!

橙三吉。 提交于 2020-03-07 03:36:49
盒子模型 盒子模型的四个部分:内容区、边框,内边距,外边距;前三者共同决定盒子可见框的大小。 边框 为元素设置边框 .box1{ width:100px; height:100px; background-color red; /*设置盒子内容区宽高及颜色。*/ border-width:10px; border-color:yellow; border-style:solid; /*设置边框,三个样式缺一不可,缺了就直接不显示边框。*/ } border-width 使用border-width可以分别指定四个边框的宽度。 指定四个值:按顺时针设置; 指定三个值:分别设置给上 左右 下; 指定两个值:分别设置给上下 左右; 指定一个值:四边全为这个值。 border-width:10px 20px 30px 40px; /*则上边框为10px,右边框为20px,以此类推*。/ //方便起见,此规则自定义为“4321”。      //题外话:如果你也知道3421...hhh border-color 原理同4321有: border-color:red blue green; /*则上边框为红色,左右边框为蓝色,下边框为绿色。*/ border-style 使用border-style来设置边框样式。 可选值: none 默认值,没有边框; ​ solid 实线; ​

CSS 锦囊[收藏]

微笑、不失礼 提交于 2020-03-07 02:27:30
onestab 关闭了,希望不是永久的。还好做了镜像,收下几篇值得收藏的文章。 CSS 锦囊 最后更新:2004.03.05 翻译: onestab [2004.03.09] 原文:mezzoblue CSS Crib Sheet 在使用CSS建站时,您肯定遇到过形形色色的布局问题,最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易,当您遇到困难时为您提供快速参考。 如果您有所补充, 请在这里发表您的意见 . 本文的其他语言版: 法语 , 德语 , 西班牙语 和 匈牙利语 。 欢迎提供其他翻译。 有疑问,先验证 在调试时,先对您的代码进行验证往往能省去不少麻烦事。格式不正确的 XHTML /CSS 会导致许多布局上的错误。 在其他浏览器中进行测试 之前 ,请先在最先进的浏览器中撰写和测试CSS代码,而不是相反。 如果您在破旧的浏览器中编写和测试,你的代码就不得不依赖那个破旧浏览器的糟糕的显示,然后在符合标准的浏览器中进行测试,看到显示结果“不正常”时,你会很沮丧的。相反,您应该先将您的代码完善,然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的,你不必再为支持其他浏览器而劳心费神。当然了,目前遵从标准的浏览器无疑就是 Mozilla, Safari 或 Opera。 确保您想要的效果真的存在 许多特定的浏览器专有的CSS扩展在 正式标准 中并不存在。