css颜色 | 易学教程

CSS

阅读更多关于 CSS

[TOC] CSS 基础使用一、CSS介绍 CSS全称为： Cascading Style Sheets ，意为层叠样式表，与HTML相辅相成，实现网页的排版布局与样式美化二、CSS使用方式 1. 行内样式/内联样式借助于style标签属性，为当前的元素添加样式声明 < 标签名 style =" 样式声明 " > CSS样式声明 : 由CSS属性和值组成例： style="属性:值;属性:值;" 常用CSS属性 : 设置文本颜色 color:red; 设置背景颜色 background-color:green; 设置字体大小 font-size:32px; 2. 内嵌样式借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式示例: <style> 选择器{ 属性:值; 属性:值; } </style> 选择器 : 通过标签名或者某些属性值到页面中选取相应的元素，为其应用样式示例： /*标签选择器 : 根据标签名匹配所有的该元素*/ p { color : red ; } 3. 外链样式表创建外部样式表文件后缀使用.css 在HTML文件中使用标签引入外部样式表 < link rel = " stylesheet " href = " URL " type =

CSS层叠样式表01

阅读更多关于 CSS层叠样式表01

CSS(Cascading Style Sheets)层叠样式表用于修饰HTML标签的样式 CSS注释一般来说，CSS是一个独立的文件，由于它的内容是修饰HTML标签的样式，为了方便后期的维护和修改，所以我们人为使用注释说明当前样式的是用于修饰什么内容的单行注释：/*注释文本*/ 多行注释：就是在单行注释中换行即可 /* 注释1 注释2 */ 养成习惯 /*这是首页的css样式文件（说明css文件的作用）*/ /*页面通用样式*/ /*顶部导航条样式*/ /*侧边菜单栏样式*/ CSS语法结构选择器名 { 属性名:属性值; 属性值1:属性值1; …… 属性值n:属性值n } CSS三种引入方式 1.外部CSS文件(标准使用方式)  <link rel="stylesheet" href="myfirstcss.css"> 2.在head标签使用style标签编写CSS代码 <head> <meta charset="UTF-8"> <title>CSS样式</title>  <style> P { color: indianred; } </style> </head> 3.标签内部通过style属性直接书写对应的样式(不推荐使用) <div> <p style=

谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线

阅读更多关于谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线

原文: 谈谈一些有趣的CSS题目（十五）-- 谈谈 CSS 关键字 initial、inherit 和 unset 开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。不断更新，不断更新，不断更新，重要的事情说三遍。谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit 谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题谈谈一些有趣的CSS题目（七）-- 消失的边界线问题谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器谈谈一些有趣的CSS题目（十一）-- reset.css知多少谈谈一些有趣的CSS题目（十二）-- 深入探讨 CSS 特性检测

[2016-01-17][CSS][背景相关的属性]

阅读更多关于 [2016-01-17][CSS][背景相关的属性]

[2016-01-17][CSS][背景相关的属性] 背景相关的属性 background-coclor 设置背景颜色 background-image 设置背景图片 background-image:"图片 url "; background-image: none ;无,默认值 background-image: inherit ;继承父元素 background-repeat :设置是否以及何如重复背景图像 background-repeat: repeat; 默认,背景图片在水平和垂直反向重复 background-repeat: repeat-x ;背景图像在水平方向重复 background-repeat: repeat-y ;背景图像在垂直方向重复 background-repeat: no-repeat ;背景图像仅显示一次 background-repeat: inherit; 继承父级元素 background-position :设置图像的开始位置有两个值,第一个值描述x,第二值描述y left 左 right 右 center 中 top 顶 bottom 底如果只规定了一个值,另一个值默认是 center x% y% 如果只规定了一个值,另一个值默认是 50% xpx ypx 如果只规定了一个值,另一个值默认是 50 % (没错不是px是%)

59.纯 CSS 创作彩虹背景文字

阅读更多关于 59.纯 CSS 创作彩虹背景文字

原文地址： https://segmentfault.com/a/1190000015352436 修改后地址： https://scrimba.com/c/cqK3LaTQ 感想：又一次见识到CSS的强大之处，当然 MDN 文档也是666； HTML code： <p>thanks</p> CSS code： html, body { margin: 0; padding: 0; } /* 设置body的子元素水平垂直居中 */ body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: black; } /* 设置p中文字样式 */ p{ color: white; /* 1. font 文档地址： http://www.w3school.com.cn/cssref/pr_font_font.asp ； * 2.vw : 视口宽度 , vh : 视口高度； */ font: bold 20vw sans-serif; text-transform: uppercase; /* 设置彩虹背景 */ background-image: linear-gradient( to right, orangered, orange, gold,

web前端开发——css

阅读更多关于 web前端开发——css

一、css介绍 1、css是什么？ Cascading Style Sheets缩写，层叠样式表。样式定义如何显示HTML元素，样式通常又会存在于样式表中。 2、为什么需要css？使HTML页面变得美观；将HTML页面的内容与样式分离；提高web开发的工作效率。 3、css的优势内容与表现分离网页的表现统一，容易修改丰富的样式，使页面布局更加灵活减少网页的代码量，增加网页浏览器速度，节省网络带宽运用独立页面的css,有利于网页被搜索引擎收录二、css语法 css语法分为两部分：选择器和声明。如： h3{ width: 300px; color: red; } h3为选择器，{ }内的内容就是声明，它包含了属性与属性值。三、css引入方式 1、引入方式有三种：　　1.行内样式（内联样式）　　2.内接样式（内嵌方式）　　3.外接样式　　　　　　3.1 链接式　　　　3.2 导入式 2、行内样式：直接在标签头里面定义样式。 <!doctype html> <html> <head> <meta charset="utf8"> </head> <body> <p style="color: blue;">这是一个p标签！</p> </body> </html> 3、内接样式：使用<style>标签在<head>标签里面定义内容的样式。 <!doctype

我的收藏

阅读更多关于我的收藏

平时收藏了一些好的站点，在些谢谢那些作者： Bookmarks 书签栏书签工具栏综合看雪安全论坛 - www.pediy.com 蓝色理想经典论坛-前端开发 UI设计 web编程 w3school 在线教程 DIV+CSS教程_DIV+CSS布局_十天学会div+css_web标准化——标准之路禅意花园学习编程 | Codecademy 51CTO.COM - 技术成就梦想 - 中国领先的IT技术网站后代选择器和子选择器的区别！！！ - Knuth_档案 - 博客园详细解读DIV+CSS定位 CSS/DIV网页设计视频教程目录 - CSS,Javascript,jQuery,视频教程 - Web网页设计开发制作技巧，前沿视频教室 CSS论坛 - DIVCSS5 前端练习系列60-ie绝对定位点击的问题 | <前端开发> CSS3-HTML5之家中文CSS3,HTML5教程网站让IE也支持box-shadow | Web前端开发 – 专注于网站前端设计与Web用户体验 W3CPlus | css3教程-css3实例-css3动画 | 记述前端那些事——引领Web前沿 22款给力的HTML5和CSS3帮助工具前端集锦工具 | 前端开发网(W3Cfuns.com)! RD1012: 不同浏览器内 'line-height' 样式设置会影响不同行内替换元素的显示高度 -

css整理－02 颜色和字体

阅读更多关于 css整理－02 颜色和字体

颜色命名颜色 RGB指定颜色数值: 0-255 百分比三元组：红绿蓝 16进制RGB web安全颜色在256色计算机系统上总能避免抖动的颜色表示为rgb值20%和51的倍数 web安全色的简写16进制是0,3,6,9,C,F 长度单位绝对长度单位 in, cm, mm, pt, pc 实际中几乎不使用相对长度单位印刷度量单位: em, ex ,像素: px 度量的实际距离可能因为屏幕分辨率，可视区的宽度，用户选择等原因而改变 1个 em 定义为一种给定字体的font-size值; (实际上是高度值) ex 指的是所用字体中小写x的高度；如果两段文本像素相同但字体不同， ex 值也会不同选择最好的度量单位是相对长度单位，特别是 em 大部分情况下｀1ex = 0.5em` 除了设置文本大小，对于元素的其他方面更适合像素，如边框，定位；字体系列特定字体系列通用字体系列 Serif: 字体成比例并且又上下短线 Sans-serif: 字体成比例，没有上下短线 Monospace: 字体不成比例,通常用于模拟打印机打出的文本 Cursive: 不成比例，模范人手写的文本 Fantasy：无法用任何特征来定义使用直接使用通用字体，用户代理会选择一个特定字体直接使用特定字体，但如果没有这个字体，则会使用默认字体由于上面的原因，一般使用特殊字体加通用字体的格式

CSS基础

阅读更多关于 CSS基础

css语法:选择器{声明}; 声明由 css属性:属性值; 组成 p{background-color: #ccc;} css属性 width 宽度(单位：px) height 高度（单位:px） background-color 背景颜色(颜色的英文或者十六进制颜色) color 字体颜色 font-size 字体大小 …… css注释 /*h3{width:300px;}*/ 单行注释 /* p{ width:300px; height: 300px; } */多行注释 css样式表 1.内部样式表：将css语法写在style标签里面，而style标签写在head里面。作用域是本页面上。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> h3{ width:300px; height:300px; background-color:red; } </style> </head> <body> <h3>内部样式表</h3> </body> </html> 2.外部样式表：新建一个css文件，在css文件里写css语法.接着在html文件里通过link标签（写在head里面）的href属性链接到该css文件

css书写规范

阅读更多关于 css书写规范

一、使用CSS缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。二、明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width: 100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。三、区分大小写当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。class和id的值在HTML 和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。前的元素限定四、取消class和id 当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如： div#content { /* declarations / } fieldset.details { / declarations */ } 可以写成 content { /* declarations / } .details { /

订阅 css颜色