css样式 | 易学教程

CSS基础知识

阅读更多关于 CSS基础知识

3 月，跳不动了？>>> 1.CSS的编写格式键值对形式的，冒号左边是属性名，右边属性名称 2.CSS的3种书写形式 //1.行内样式 <div>  <span>123</span> <span style="color: red; background-color: blue">红蓝色</span> </div> //2.内页样式 <style type="text/css"> span{ color: green; } </style> //3.外部样式先新建一个空的file，后缀为css //test.css： span{ color: green; }  <link rel="stylesheet" href="test.css"> 3.标签选择器 1>.标签选择器 2>.类标签选择器 3>.id标签选择器 4>.群组选择器 5>.选择器组合 6>.后代选择器 7>.子标签选择器 8>.相邻兄弟选择器 9>.属性选择器 10>.伪类 1.标签选择器 p{ color: red; } 2.class标签选择器前面加点. 可以批量 .first{ color:red; } 3.id标签选择器前面加#.只能用1个id标签 #second{ color

CSS中可以和不可以继承的属性

阅读更多关于 CSS中可以和不可以继承的属性

一、无继承性的属性 1、display：规定元素应该生成的框的类型 2、文本属性： vertical-align：垂直文本对齐 text-decoration：规定添加到文本的装饰 text-shadow：文本阴影效果 white-space：空白符的处理 unicode-bidi：设置文本的方向 3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom

css margin知识全集

阅读更多关于 css margin知识全集

你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… 写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算写下这篇文章，一来是自己工作中的总结，也是对自己知识的一次梳理。 Margin是什么 CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School 边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南我比较喜欢使用“外边距”这个词来解释margin（同理padding可以称之为“内边距”，但是我又恰恰喜欢称呼padding为“补白”或者“留白”），我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 Margin的特性 margin始终是透明的。 margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin

【浏览器中的页面】

阅读更多关于【浏览器中的页面】

浏览器中的页面一、DOM树 1、在渲染引擎中，DOM有三个层面的作用： DOM是表述HTML的内部数据结构，它会将Web页面和JavaScript脚本连接起来，并过滤一些不安全的内容 2、DOM树如何生成：网络进程和渲染进程建立一个管道，HTML解析器直接解析，不需要等待text/html类型的数据全部接受完毕再进行解析 3、HTML 解析过程 ①通过分词器将字节流转换为token ②将token解析为DOM节点（将token压入栈中，然后一个一个分析） ③将DOM节点添加到DOM树中 4、JavaScript如何影响DOM生成暂停HTML解析，下载解析执行完毕后再继续进行html解析（如果执行js代码期间遇到CSSDOM，则需要等待CSS 下载加载完成）为了快速执行js，在DOM生成前，会有个预解析操作（当渲染引擎收到第一个字节流后，会开启一个预解析线程，用来分析HTML文件包含的JS，CSS等相关文件，并提前下载） CSS样式文件本身不会阻塞DOM生成，但是JS会阻塞DOM生成，而CSS样式文件会阻塞JS执行 5、渲染引擎有一个安全检查模块叫XSSAuditor，用来检查词法安全二、CSS如何影响首次加载时的白屏时间 CSSDOM作用：提供给Javascript操作样式表的能力为布局树的合成提供基础的样式信息 URL 请求开始，到首次显示页面的内容

常用CSS标签1——属性

阅读更多关于常用CSS标签1——属性

一、属性 1、字体 font 1）font: font-style; font-variant; font-weight; font-size; font-height; font-family. 2) color: 指定颜色，写法：十六进制值（或者简写）； rgb（）函数； css承认的颜色名。 3）font-family: 在后面直接输入名字，如果有英文，尽量用引号引起来。 4）font-face(导入外部字体) @font-face{ font-family src:url("url"); } 必须记住导入外部字体后，要进行引用。 5）font-size: A、absolute-size 绝对大小： xx-small; x-small; small; medium; large; x-large; xx-large. B、 relative-size 相对大小： larger; smaller. C、length 长度：常以px为选项。 D、百分比：其百分比取值是基于父对象中字体的尺寸。 6）font-style (字体的样式)： normal(正常); italic和oblique（斜体）. 7）font-weight(字重): normal(正常=400); bold(加粗=700); bolder(特粗，只在IE5中可行); lighter(细体，

CSS样式表选择器

阅读更多关于 CSS样式表选择器

1. 内联样式表和 HTML联合显示，控制精确，但是可重用性差，冗余较多。例： <p style="font-size:14px;">内联样式表 </p> <div style="background-color:#0C0; width:80%; font-size:24px; color:red; margin:auto">abcdefghijklmnopqrstuvwxyz</div> <span style="background-color:#600; font-size:18px; color:#303">span不可以被更改大小，因为规定了span使用多少就占用多少</span> 2. 内嵌样式表作为一个独立区域内嵌在网页里，必须写在 head标签里面。 <style type="text/css"> p //格式对 p标签起作用 { 样式； } </style> 3. 外部样式表新建一个 CSS文件，用来放置样式表。如果要在 HTML文件中调用样式表，需要在 HTML文件中点右键 →CSS样式表 →附加样式表。一般用 link连接方式。有些标签有默认的边距，一般写样式表代码的时候都会先去除（也可以设置其他的样式），如下：（二）选择器 1. 标签选择器。用标签名做选择器。 2.class 选择器。都是以 “.” 开头。 <div class="样式名"> 3

CSS样式表

阅读更多关于 CSS样式表

使用CSS样式的方式 HTML <!DOCTYPE>声明标签（H5声明标签）（1）内链样式表：<body style="background-color:green; margin:0; padding:0"></body> （2）嵌入式样式表：<style type="text/css"></style>（需要将样式放在<head></head>）（3）引入式样式表：<link rel="StyleSheet" type="text/css" href="style.css">（需要将样式放在<head></head>）定义样式表 HTML标记定义 <p>...</p> p{属性：属性值；属性1：属性值1} 一个选择器可以控制若干个样式属性，他们之间需要用英语的“;”隔开，最后一个可以不加; Class定义<p class="p">...</p> class定义是以"."开始如.p{属性：属性值；属性1：属性值1} ID定义<p id="p">...</p> ID定义是“#”开始的，如#p{属性：属性值；属性1：属性值1} 优先级问题（1）ID>Class>HTML （2）同级时选择离元素最近的一个，如 #p{color:red} 　　　#p{color:#f60} 执行颜色为#f60 组合选择器（同时控制多个元素）如，h1,h2,h3{font-size

【前端面试CSS】—垂直水平居中终极版

阅读更多关于【前端面试CSS】—垂直水平居中终极版

前言：居中元素一直是前端ers绕不过去的坎儿，各种面试中经常出现，一起做一个总结，欢迎补充~ 以下分别会介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下：一、水平居中 1.行内元素水平居中利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。 .parent{//在父容器设置 text-align:center; } 此外，如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。 <div class="parent"> <div class="child">Demo</div> </div> <style> .parent{ text-align:center; } .child { display: inline-block; } </style> 2.块级元素的水平居中这种情形可以有多种实现方式: ①将该块级元素左右外边距margin-left和margin-right设置为auto .child{ width: 100px;//确保该块级元素定宽 margin:0 auto; } ②使用table+margin

盒模型布局详解

阅读更多关于盒模型布局详解

一、盒模型之display（显示方式）一、display组成部分解释 1、块（block）：其可以独行显示并且其自身支持宽高，其中宽可以设置为默认，高可以由子级或内容撑开（可以嵌套所有类型但是其中的p段落标签一般只允许内联嵌套）。 2、内联也叫行（inline）：其可以同行显示并且不支持宽高是因为其宽高是由内容决定的（一般嵌套内联）。 3、内联块（inline-block）：包含块和内联的所有特点，但是如果设置了宽高的话就一定要使用设置的宽高，如果值设置一种则按比例缩放（一般只作为最内层级）。 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>display</title>  <style type="text/css"> div { /*块*/ display: block; /*自适应父级可用content的宽度*/ /*width: auto;*/ /*默认0*/ /*height: 0px;*/ } span { /*内联*/ display: inline; /*不支持宽高*/ } img { /*内联块*/ display: inline-block; width: auto; height: auto; } </style> <!-- 验证宽高设置

第三十七天

阅读更多关于第三十七天

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>border</title>  <style type="text/css"> .bd { width: 100px; 　　height: 100px; background-color: transparent; } .bd { /*border: 50px solid orange;*/ border-top: 50px solid orange; border-right: 50px solid cyan; border-bottom: 50px solid yellow; border-left: 50px solid blue; /*border-right: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent;*/ } </style>  <style type="text/css"> .bd { width: 0; height: 0; } .bd { border-top: 50px solid orange; border-right: 50px

订阅 css样式