css颜色

第二阶段：Html基础 day50 前端--Html基础之css

由 巧了我就是萌 提交于 2019-12-01 05:07:24
目录 1. css介绍 2.css语法 2.1 css实例 2.2 css注释 2.3 css的几种引入方式 2.4 css选择器 2.5 css属性相关 前端之CSS 1. css介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义 如何显示 HTML元素。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2.css语法 2.1 css实例 每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 2.2 css注释 /*注释内容*/ 2.3 css的几种引入方式 2.3.1 行内样式 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 2.3.2 内部样式 嵌入式是将CSS样式集中写在网页的 标签对的 标签对中。格式如下： <head> <meta charset="UTF-8"> 　　<title>Title</title> <style> 　　p{ background-color: #2b99ff; } 　　</style> </head> 2.3.3 外部样式 外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle

03 前端--CSS内容

由 会有一股神秘感。 提交于 2019-12-01 05:06:00
目录 一、CSS介绍 二、CSS语法 三、CSS 的引入方式 3.1 行内引入样式 3.2 内部引入样式 3.3 外部引入样式 四、CSS选择器 1、基本选择器 4.1 标签元素选择器 4.2 ID选择器 4.3 类选择器 4.4 通用选择器 2. 组合选择器 2.1 儿子选择器 2.2 后代选择器 2.3 毗邻选择器 2.4 兄弟选择器 3.属性选择器 4.分组选择器 5.伪类选择器 6.伪元素选择器 7.选择器的优先级 五、CSS相关属性 5.1 宽和高 5.2 字体相关属性 1.文字字体 2.字体大小 3.字体粗细 4.文本颜色 一、CSS介绍 CSS(Cascading Style Sheet ,层叠样式表):定义如何显示HTML元素,也就是HTML的样式表 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化(渲染) 二、CSS语法 每一个CSS样式由两个部分组成： 选择器和声明 。 声明又包括属性和属性值，每个声明又包括 属性和属性值 。每个声明之后用分号结束。 CSS的注释是 /*这里是注释*/ ：再次提醒 注释是代码之母 三、CSS 的引入方式 3.1 行内引入样式 行内式是在标签内标记的style属性中设定CSS样式。不推荐大规模使用。 <!--在style属性里设置样式，每一个样式是样式属性：属性值，多个属性样式用分号隔开--> <p style=

CSS(上)

由 霸气de小男生 提交于 2019-12-01 05:04:43
目录 CSS(上) 什么是CSS？ CSS的优点 CSS的引入方式 行内样式 内部样式 外部样式 CSS的两大特性 CSS选择器 基本选择器 组合选择器 更多选择器 选择器的优先级 CSS属性相关(了解) 宽和高 字体 CSS(上) 什么是CSS？ CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式， 定义网页的显示效果 。简单一句话：CSS将网页 内容和显示样式进行分离 ，提高了显示功能。 CSS的优点 使数据和显示分开 降低网络流量 使整个网站视觉效果一致 使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css） 比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。 CSS的引入方式 行内样式 <p style="color: red">您好</p> 内部样式 <style> div{ color:red; } </style> <!--我们的<style>标签要写在<body>的外面--> <div>我就是这么强大</div> eg:这是个在pycharm中的例子。 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

前端之CSS

由 时光总嘲笑我的痴心妄想 提交于 2019-12-01 05:02:19
CSS CSS 简介 ## CSS介绍 CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 ## CSS语法 CSS实例：每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 例如： h1 {color: red; font-size: 14px} 选择器 属性 声明 值 属性 声明 值 ## CSS注释 /*这是注释*/ 快捷键是 ctrl + / CSS的几种引入方式 ## 行内样式 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用 <p style="color; red">Hello world.</p> ## 内部样式 嵌入式是将CSS样式集中写在网页<head></head>标签对中，格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> <p>Hello world</p> ## 外部样式 外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel=

day50学习整理-前端基础-css

由 六月ゝ 毕业季﹏ 提交于 2019-12-01 05:01:36
目录 2019/10/11 学习整理 前端之css基础 1 | 0 CSS介绍 2 | 0 CSS语法 2 | 1 CSS实例 2 | 2 CSS注释 3 | 0 CSS的几种引入方式 3 | 1 行内样式 3 | 2 内部样式 3 | 3 外部样式 4 | 0 CSS选择器 4 | 1 基本选择器 元素选择器 ID选择器 类选择器 通用选择器 4 | 2 组合选择器 后代选择器 儿子选择器 毗邻选择器 弟弟选择器 4 | 3 属性选择器 4 | 4 分组和嵌套 分组 嵌套 4 | 5 伪类选择器 4 | 6 伪元素选择器 first-letter before after 4 | 7 选择器的优先级 CSS继承 选择器的优先级 5 | 0 CSS属性相关 5 | 1 宽和高 5 | 2 字体属性 文字字体 字体大小 字重（粗细） 文本颜色 5 | 3 文字属性 文字对齐 文字装饰 首行缩进 文字之间的距离 5 | 4 背景属性 2019/10/11 学习整理 前端之css基础 1 | 0 CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义 如何显示 HTML元素。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2 | 0 CSS语法 2 | 1 CSS实例 每个CSS样式由两个组成部分：选择器和声明

前端之CSS

由 久未见 提交于 2019-12-01 05:01:10
目录 前端之CSS 1.CSS介绍 2.CSS语法 2.1CSS实例 2.2CSS注释 3.CSS的几种引入方式 3.1行内样式 3.2内部样式 3.3外部样式 4.CSS选择器 4.1基本选择器 4.2组合选择器 4.3属性选择器 4.4分组和嵌套 4.5伪类选择器 4.6伪元素选择器 4.7选择器的优先级 5.CSS属性相关 5.1宽和高 5.2 字体属性 前端之CSS 1.CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义 如何显示 HTML元素。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2.CSS语法 2.1CSS实例 每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值每个声明之后用分号结束。 2.2CSS注释 /*注释*/ 注释是代码之母。 3.CSS的几种引入方式 3.1行内样式 行内样式是标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 3.2内部样式 嵌入式是将CSS样式集中写在网页的 标签对的 标签对中。格式如下: <head> 　　<meta charset="UTF-8"> 　　<title>Title</title> 　　 <style> 　　　　 p{ background-color

前端之CSS

由 痴心易碎 提交于 2019-12-01 05:01:07
CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义 如何显示 HTML元素。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法 CSS实例 每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 <style> div#选择器{ color: blue;height: 10px; }#声明;声明 </style> CSS注释 /*这是注释*/ CSS的几种引入方式 行内(内联)样式 行内式是在标记(标签)中的style属性中设定CSS样式。不推荐大规模使用。 <div style="color: red">Hello</div> (不需要选择器) 内部样式 嵌入式是将CSS样式集中写在网页的<head></head>标签对中的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color: blue;height: 10px; } </style> </head> (需要选择器) 外部样式 外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel=

HTML--CSS样式

由 风流意气都作罢 提交于 2019-12-01 04:58:21
目录 HTML联合CSS CSS的几种引入方式 CSS选择器 伪类选择器 选择器的优先级 CSS相关属性 HTML联合CSS CSS介绍： CSS(层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表，它就会按照这个样式表 CSS语法 每个CSS样式由两个组成部分：选择器和声明。声明包括 属性 和 属性值 。 每个声明结束后用分号结束 选择器{ 属性：值; } PS:属性和值之后就是声明 CSS注释 /* CSS的注释格式 */ CSS的几种引入方式 行内样式 行内式是标记在style属性中设定CSS样式，不建议大规模使用 内部样式 嵌入式是将CSS样式集中写在网页的头部的 <style></style>标签中 外部样式 外部样式就是将CSS写在一个单独的文件中，然后在页面进行引入推荐使用 1.行内样式 行内式是标记在style属性中设定CSS样式，不建议大规模使用 <p style="color:red">hello world</p> <!--style属性,属性,属性值 --> 2.内部样式 嵌入式是将CSS样式集中写在网页的头部的 <style></style>标签中 <head> <meta charset="UTF-8"> <title>CSS样式</title> <style> /*p是选择器*/ p{ background-color:#2b99ff; /

CSS不同颜色按钮实例

由 前提是你 提交于 2019-12-01 04:52:32
CSS减少代码重复技巧非常多，以主要包含采用相对尺寸、半透明颜色的实例来说明CSS减少代码重复技巧的一些运用。 以下为通过CSS代码实现的一个“Yes!”按钮效果以及相应的代码： <span class='basisButton'> Yes! </span>　 与之组合的CSS代码： .basisButton { padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px; line-height: 30px; }　　 #相对尺寸的使用 行高是字号的1.5倍，可以修改为： font-size: 20px; line-height: 1.5em; 字号也可以根据父元素字号修改为相对尺寸： font-size: 1.25em; /* 假设父级元素字号为16px*/ line-height: 1.5em;　 将pading、border-radius、box-shadow以及text-shadow值也根据字号为基准修改为相对尺寸：

【转载】CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产

由 谁说胖子不能爱 提交于 2019-11-30 21:47:16
文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接： https://www.zhangxinxu.com/wordpress/2018/11/css-filter-hue-rotate-button/ 原文摘要： 传统按钮都是通过具体色值进行赋色的。有如下缺点： 每种按钮还有不同的 :hover 和 :active 颜色需要额外设置，按钮CSS代码量较多，出现颜色也很多； 如果出现新的状态按钮，例如今年流行紫色，需要一个紫色按钮。开发同学需要求助于设计师，因为自己选的紫色的亮度和饱和度往往和现有的按钮不搭。 实际上，有更简单的方法按钮赋色方法，可以规避上面的缺点，就是使用CSS3 filter滤镜中的 hue-rotate() 色调旋转滤镜。 我自己整理的代码： <button class="btn">原按钮</button> <button class="btn btn-red">红按钮</button> <button class="btn btn-green">绿按钮</button> <style> .btn {width: 100px;height: 45px;border: none;border-radius: 5px;cursor: pointer;background: #2486ff;color: #fff
订阅 css颜色