css颜色 | 易学教程

【CSS】我的样式哪里来的？—— css的继承性

阅读更多关于【CSS】我的样式哪里来的？—— css的继承性

在之前我们写css的时候，曾经出现过如下这样一种情况： 6继承性.html （head部分） 1 <style> 2 div { 3 background-color: #ccc; 4 font-size: 30px; 5 font-family: "微软雅黑"; 6 color: red; 7 height: 300px; 8 font-weight: 700; 9 } 10 </style> 6继承性.html （body部分） 1 <div> 2 <ul> 3 <li>item1</li> 4 <li>item2</li> 5 <li>item3</li> 6 </ul> 7 </div> 实现效果： Q: 从网页中我们可以看出<li></li>标签更改了样式，但是在代码里我们并没有对其进行任何设置，那么他的样式是哪里来的呢？？我们在css里更改了<div></div>标签的样式，这两者之间有没有什么关系呢？？因为我们使用的是谷歌浏览器，所以我们可以右键“检查”来亲自看一下源代码，看看到底发生了什么。左边是html代码，右边style标签下是css，我们可以通过选中左边的某一个标签，来看一下该标签上的css样式。我们选中li标签，注意到右边css中有一行提示意思是继承于ul标签，但是ul标签我们也没有设置css啊，于是继续往下翻，我们注意到另一行提示继承自div标签

Bulma CSS - CSS类

阅读更多关于 Bulma CSS - CSS类

Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一个纯粹的CSS框架，没有任何JavaScript代码，最终生成的只是一个简单的.css文件: https://github.com/jgthms/bulma/blob/master/css/bulma.css Bulma的原则是不直接对标签设置样式，而是通过css类，让开发人员选择是否应用Bulma样式。例如 <input type="text"> ，如果不设置css类，是没有Bulma的样式效果的，只有当设置 .input css类后才有： <input type="text" class="input"> 。 Bulma只在2种特殊情况下，直接对标签设置样式：重置页面样式： generic.sass 文本内容的样式(如所见即所得)： .content css类包含的内容主要的CSS类 Bulma中主要包含了以下几大类的css定义修饰符分列布局表单元素组件修饰符可以方便地设置元素的颜色、大小等。如下面定义了一个按钮， is-primary 就是修饰符 <a class="button is-primary"> Button </a> 分列

css样式的书写顺序及原理

阅读更多关于 css样式的书写顺序及原理

刚开始学习前端的时候，每次写css样式都是用到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对网页加载代码的影响。后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的一种方式。那么是怎么个顺序呢？（1）定位属性：position display float left top right bottom overflow clear z-index （2）自身属性：width height padding border margin （3）文字属性：font-family font-size font-style font-weight font-varient color text-align vertical-align word-spacing white-space text-overflow （4）背景：background border （5）css3中新增属性：content box-shadow border-radius transform…… 按照上述1 2 3 4 5的顺序进行书写。目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能原理：浏览器的渲染流程为—— ①解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构 ②构建render树

day03

阅读更多关于 day03

CSS的基本概念（使用CSS让单调的HEML网页更富表现力：文档体积小，便于搜索，可读性好分层思想HTML+CSS 结构和表现分离，易于维护和管理） CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观。指颜色背景大小元素定位... 四、Css选择器 css选择器，也称为选择符，用于选择需要添加样式的元素 css的基本语法: 选择器{ 属性:属性值; （样式规则：键值对） …} 1. 全局选择器通配符通用权重 0 全局选择器：设置所有标签使用同一样式，用*表示全局选择器语法:*{} 显示效果： html代码： <h1>我是标题红色</h1> <p>我是段落红色</p> css代码： *{ color:red;} ！结构和样式分离：分工明确，操作简单组合选择器： H1,h2,h3,h4,h5,p{ } h.special,special,#one{ text-decoration:underline;//下划线 } 后代选择器： <style id="my"> /*查找p元素的后代span元素空格就是后代*/ p span{ color: green; } i span{ color: red; } .pcolor #my{ color: lightskyblue; font-size: 50px; } </style> <p

CSS背景样式和列表样式

阅读更多关于 CSS背景样式和列表样式

background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-position 设置背景图像的起始位置 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-repeat 设置背景图像是否重复及如何重复 background 简写属性，作用是将背景属性设置在一个声明中列表样式： list-style-type 设置列表项标志的类型 list-style-image 将图像设置为列表项标志 list-style-position 设置列表中列表项标志的位置 list-style 简写属性，用于把所有列表的属性设置于一个声明中来源： https://www.cnblogs.com/hugegege/p/9487307.html

css样式的边框样、背景样式、超链接样式、列表样式

阅读更多关于 css样式的边框样、背景样式、超链接样式、列表样式

今天学习了css样式的边框样、背景样式、超链接样式、列表样式一、边框样式 1.边框的宽度 border-width 2.边框的外观（实线 solid、虚线dashed、点线dotted、边框双线double、无样式none） 3.边框颜色 border-color 4.简单写法border：1px solid red 5.局部边框样式; border-top border-bottom border-left border-right 二、背景样式 background-color 背景颜色 background-image 背景图片 background-repeat 显示方式（不平铺no-repeat、水平方向平铺repeat-x、垂直方向平铺repeat-y） background-attachment 是否随内容而滚动三、超链接样式 a:link 定义a元素未访问时的样式 a:visited 定义a元素访问后的样式 a:hover 定义鼠标经过显示的样式 a:active 定义鼠标单击激活时的样式定义这4个伪类，必须按照(link、visited、hover、active)LVHA的顺序进行，不然浏览器可能无法正常显示这4种样式四、列表样式列表项符号list-style-type 1. 有序列表语法: <ol type=""> <li>有序列表项</1i>

css中border的一些知识

阅读更多关于 css中border的一些知识

在编写页面代码时，经常会用到元素的边框括弧：border 给某个元素增加一个1px的实线黑色边框: html代码部分1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery/2.0.0/jquery.min.js"></script> <script src="js/bootstrap/3.3.6/bootstrap.js"></script> <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.css"> <link rel="stylesheet" href="css/text.css"> </head> <body> <p>使用border给元素增加一个像素的黑色实线边框</p> <div class="css_2019_2_3_1 css_2019_2_3_2">元素2019_2_3_1</div> css代码部分1 .css_2019_2_3_1{ border:1px solid #000; } .css_2019_2_3_2{ height: 200px; width: 300px; margin: 20px; } 　　效果图1：

css border 三角形阴影(不规则图形阴影) & 多重边框的制作

阅读更多关于 css border 三角形阴影(不规则图形阴影) & 多重边框的制作

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！ border 的组合写法　　border：border-width border-style border-color; border-width：边框宽度，不能为百分比，因为不会根据设备宽度改变；同理，outline | text-shadow | box-shadow 也不可以； border-style：边框样式，一般用 solid 多一点，dashed（虚线）、dotted（点状线）也有； border-color：边框颜色，默认颜色是元素的文本颜色，如果没有设置，那就从父元素继承文本颜色；　　边框可以根据方向单独设置，上下左右，border-top | border-bottom | border-left | border-right ; 　　所以属性也可以单独设置，border-top-width | border-top-style | border-top-color ; 　　单属性也可以有组合写法： border-width:上右下左；（顺时针方向） border-width:上左右下； border-width:上下左右； border-width:四个方向； border-style | border-color也可以这样设置；　

前端之CSS

阅读更多关于前端之CSS

CSS介绍　　CSS（Cascasing Style Sheet,层叠样式）定义如何显示HTLM元素。 css就是用来调节标签样式的当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法：每个CSS样式由两个组成部分：选择器和声明，声明又包括属性和属性值。每个声明之后用分号结束 css语法结构：　　选择器 { 属性1：值；属性2：值；属性3：值 } css的三种引入方式：　　1、文件的导入式（也是最规范的形式）　　2、head内利用style标签，内部直接书写css代码　　3、行内式（最不推荐使用的） css的流程：　　先查找到标签后，再相应的做渲染操作　　1、如何查找标签　　2、如何设置样式 CSS注释： /*这是注释*/ 几种引入方式： 1、行内样式　　行内式是在标记的style属性中设定CSS样式，不推荐频繁使用。 <p style="color: red">Hello world.</p> 2、内部样式　　嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> <

前端5道常见面试题

阅读更多关于前端5道常见面试题

面试题讲解：第一题：行内元素有哪些？块级元素有哪些？有哪些css盒模型？行内元素举例：a、strong、b、em、i、del、u、ins、span、... 块级元素举例：h1~h6、p、div、ul、ol、l 、... 行内块元素举例：img、input、td、... css盒模型： 1.盒模型概念：所谓盒模型就是把所有HTML元素均看作一个个矩形盒子，该盒子由四个部分组成：内容(content:width / height)、内边距(padding)、边框(border)、外边距(margin) css盒模型举例： 1.W3C标准盒模型（content-box）：盒子尺寸 = width 2.IE标准盒模型（border-box）：盒子尺寸 = width + padding + border 第二题：css引入的方式有哪些？link和@import的区别是？ 1.CSS的三种引入方式： 1.内联样式：通过HTML元素的style属性来定义样式 2.内部样式：将CSS代码集中于HTML文档的head元素中，并使用style元素定义样式 3.外部样式表：　将所有的样式定义放在一个或多个以.css为扩展名的外部样式表文件中，通过link元素将其链接到HTML文档中2.link和@import的区别： link的使用：　　　　<link rel="stylesheet"

订阅 css颜色