css颜色 | 易学教程

CSS新增属性

阅读更多关于 CSS新增属性

边框 border-radius边框圆角 border-image边框图片 box-shadow边框阴影背景 background-size背景图片尺寸 background-origin背景图片定位区域多列布局 column-count 被分割列数 column-gap 列之间的间隔 column-rule 列之间宽度、样式、颜色等样式 column-span 应该横跨的列数 column-width 列宽度 columns 设置column-width 和 column-count 的简写属性。文字特效 text-shadow（文字阴影）、text-overflow（文字溢出效果）、text-wrap（文本换行规则）、world-wrap（单词强制换行）转换 transform对元素进行移动、缩放、转动、拉长或拉伸。过渡 transition元素从一种样式变换为另一种样式时为元素添加效果动画 animation元素从一种样式逐渐变化为另一种样式的效果用户界面属性 resize是否可由用户对元素的尺寸进行调整 box-sizing以特定的方式定义匹配某个区域的特定元素 outline-offset对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓来源： https://www.cnblogs.com/microcosm/p/6574132.html

sass

阅读更多关于 sass

参考： https://www.sass.hk/guide/ 文章目录 sass快速入门使用变量嵌套CSS 规则导入SASS文件静默注释混合器（函数+参数+默认参数）使用选择器继承来精简CSS（函数的类）常见问题中文文档特色功能 (Features) 语法格式 (Syntax) sass快速入门大概使用情况：变量（ $ ），混入（ @mixin ：函数+参数+默认参数），继承（ @extend ）， >精简代码嵌套，静默注释（ // ），导入（ @import ）， >可读性更好使用变量把反复使用的css属性值定义成变量； sass使用 $ 符号来标识变量；当变量定义在css规则块内，那么该变量只能在此规则块内使用（有作用域）；变量值也可以引用其他变量；变量名推荐使用中划线；声明变量： $ highlight-color : #F90 ; $ basic-border : 1px solid black ; // 多属性值变量作用域 $nav - color : # F90 ; nav { $width : 100 px ; width : $width ; color : $nav - color ; } //编译后 nav { width : 100 px ; color : # F90 ; } 变量值也可以引用其他变量。 $

JavaWeb_02_CSS学习

阅读更多关于 JavaWeb_02_CSS学习

CSS简介 Cascading Style Sheets (CSS)层叠样式表: en.wikipedia.org 层叠：一层一层的叠加样式样式表：提供更多属性和属性值实现更多样式变化 css将显示样式和网页内容分离 CSS和HTML的结合方式（四种结合方式）（1）在每个 html 标签上面都有一个属性 style ,把 css 和 html 结合在一起 <div style="background-color:red; color:green;"> （2）使用 html 的一个标签实现 <style> 标签，写在 head 里面 <style type="text/css"> css代码; </style> <style type="text/css"> div { background-color: blue; color: red; } </style> （3）在style标签里面使用语句（在某些浏览器下不起作用） @import url(css文件的路径); - 第一步，创建一个css文件 <style type="text/css"> @import url(div.css); </style> （4）使用头标签link，引入外部css文件第一步，创建一个css文件 <link rel="stylesheet" type="text/css" href=

CSS（一）什么是CSS？选择器、美化网页元素

阅读更多关于 CSS（一）什么是CSS？选择器、美化网页元素

一、了解CSS 1.1 什么是CSS？ Cascading Style Sheet （层叠级联样式表） CSS作用：美化网页（字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动….） 1.2、发展史 CSS1.0 CSS2.0 DIV（块） + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO CSS2.1 浮动，定位 CSS3.0 圆角，阴影，动画…. 浏览器兼容性~ （旧的版本有的浏览器不支持，新版本大多数有名的浏览器都支持）因为我是学Java的，idea也能写css，所以我也用它写。用idea写css的基本格式： css代码写到css文件夹里 css的优势： 1、内容和表现分离 2、网页结构表现统一，可以实现复用 3、样式十分的丰富 4、建议使用独立于html的css文件 5、利用SEO，容易被搜索引擎收录！ 1.3、CSS的3种导入方式先创建一个html，然后创建一个css,问题来了，说了css是用来美化网页的，也就是对html做不到的地方进行加工，所以我们怎么把他们连接起来呢? 内部样式：style标签 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > Title </ title > <!--规范，<style>

Web前端开发CSS规范总结

阅读更多关于 Web前端开发CSS规范总结

作为Web前端开发必备语言，CSS为大家广为熟知，今天就跟大家分享下CSS规范总结， Web前端的小伙伴们看过来吧！ CSS样式的权值(权重) 权值等级的定义第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为100。第三等：代表类，伪类和属性选择器，如.content，权值为10。第四等：代表类型选择器和伪元素选择器，如div p，权值为1。 Ps:通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0，!important 优先级最高，万不得已的情况下才用。权重计算 #content div#main-content h2=2*100+2*1=202 #content #main-content>h2=2*100+1=201 body #content div[id="main-content"] h2=1*100+1*10+3*1=113 #main-content div.paragraph h2=1*100+1*10+2*1=112 #main-content [class="paragraph"] h2=1*100+1*10+1*1=111 div#main-content div.paragraph h2.first=1*100+2*10+3*1=123

CSS快速入门（2020.02.04）

阅读更多关于 CSS快速入门（2020.02.04）

文章目录 CSS 概念规则形式外部样式表内部样式表内联样式多重样式概念层叠规则选择 tag #id_val .class_val [property] tag tag #id_val tag .class_val tag tag.class_val 修饰概念 content 长度单位文本字体 background padding border margin 补充 CSS常用颜色名参考 CSS 概念 CSS (Cascading Style Sheets 层叠样式表) ：用于定义 HTML 元素显示的样式。规则一条CSS规则的基本组成：选择器可以是tag、id、class、property等。选择器可分组，即有多个，用“逗号”隔开。值如果是多个单词要用“双引号”括起来。多个声明之间用“分号”隔开。子元素会继承父元素的规则，单独对子元素创建规则可摆脱父元素的规则。形式外部样式表 mystyle.css body { background-color : yellow ; } p { margin-left : 20px ; /* 左边外边框宽度设置为20像素 */ background-color : blue ; /* 背景色设置为蓝色 */ } hr { color : sienna ; } mydoc1.html <!DOCTYPE

CSS——04选择器

阅读更多关于 CSS——04选择器

人生苦短，要学就只学有用的【前端教学-CSS-4】 CSS选择器 CSS 选择器今天我们围绕一个导航栏案例进行学习知识点。今日重点：复合选择器后代选择器并集选择器标签显示模式 CSS背景背景位置 CSS三大特性优先级 1. CSS复合选择器目标理解理解css复合选择器分别的应用场景应用使用后代选择器给元素添加样式使用并集选择器给元素添加样式使用伪类选择器为什么要学习css复合选择器 CSS选择器分为基础选择器和复合选择器，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。目的是为了可以选择更准确更精细的目标元素标签。复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的 1.1 后代选择器（重点）概念：后代选择器又称为包含选择器作用：用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。父级子级{属性:属性值;属性:属性值;} 语法： .class h3{color:red;font-size:16px;} 当标签发生嵌套时，内层标签就成为外层标签的后代。子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。 1.2 子元素选择器作用：子元素选择器只能选择作为某元素子元素(亲儿子) 的元素。

css渐变效果简易详解

阅读更多关于 css渐变效果简易详解

渐变效果会提高页面的整体观感页面基本上也都是要用到的 css能够实现的渐变有这两种径向渐变线性渐变 linear-gradient （线性渐变）最简：（复制下面属性给盒子即可以复现效果） width: 300rpx; height: 100rpx; background-image: linear-gradient(to right , blue,yellow ,blue) 最简效果图：延申一下如果我需要下图这种效果怎么办呢可以添加一个角度属性来控制**-45deg** 角度可以改变尝试一下就可以了 width: 300rpx; height: 100rpx; background-image: linear-gradient(-45deg, blue, yellow,blue); /* background-image: linear-gradient(to right , blue,yellow ,blue) */ 接下来简单做一个所有属性总结 linear-gradient首先是关于颜色里面可以写若干个颜色可添加百分比属性如果我想要从上向下怎么办呢？（方向属性）方向属性放在第一位方向属性有两种写法1.to+(方向) 例：to left 2.角度写法例:-45deg 还有一个可丑的重复线性渐变 repeating-linear-gradient

关于CSS样式表，看这篇就够了！

阅读更多关于关于CSS样式表，看这篇就够了！

文章目录 1 CSS 样式表 1.1 CSS 规则 1.2 CSS 选择器 1.2.1 标记选择器 1.2.2 类别选择器 1.2.3 id 选择器 1.3 在页面中包含 CSS 1.3.1 行内样式 1.3.2 内嵌式 1.3.3 链接式 2 CSS3 的新特性 2.1 模块与模块化结构 2.2 一个简单的 CSS3 实例 1 CSS 样式表 CSS 是 W3C 协会为弥补 HTML 在显示属性设定上的不足而制定的一套扩展样式标准。CSS 标准中重新定义了 HTML 中原来的文字显示样式，增加了一些新的概念，如类、层等，可以对文字重叠、定位等。在 CSS 还没有引入到页面设计之前，传统的 HTML 语言要实现页面美化在设计上是十分麻烦的，例如要设计页面中文字的样式，如果使用传统的 HTML 语句来设计页面就不得不在每个需要设计的文字上都定义样式。CSS 的出现改变了这一传统模式。 1.1 CSS 规则在 CSS 样式表中包含 3 部分内容：选择符、属性和属性值。语法格式如下：选择符{属性:属性值;} 参数说明: 选择符：又称选择器，是 CSS 中很重要的概念，所有 HTML 语言中的标记标签都是通过不同的 CSS 选择器进行控制的。属性：主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属性等内容。其中一些属性只有部分浏览器支持

css的继承和层叠

阅读更多关于 css的继承和层叠

标签（空格分隔）： css css称为层叠样式表，CSS有两大特性：继承性和层叠性，本章简单介绍一下继承性：继承性：定义：继承就是给父及设置了一些属性，子级继承了父及的该属性，这就是我们的css的继承，有一些属性可以继承， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>继承性</title> <style type="text/css"> .father{ color:red; } </style> </head> <body> <div class="father" id="egon"> <p>wangwang</p> </div> </body> </html> 问题：背景色是不是继承？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>继承性</title> <style type="text/css"> .father{ color:red; font-size: 30px; background-color: green; } </style> </head> <body> <div class="father" id="egon"> <p>wangwang</p> </div> <

订阅 css颜色