css颜色 | 易学教程

CSS

阅读更多关于 CSS

文章目录语法选择器插入样式表 css样式背景文本链接其它(列表，表格，轮廓) 框模型 CSS 定位媒介 css发展，语法 CSS 规则由两个主要的部分构成：选择器selector ，以及一条或多条声明declaration 。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。如： h1 {color:red; font-size:14px;} 值的不同写法和单位 p { color: #ff0000; } p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); } 如果值为若干单词，则要给值加引号 p {font-family: “sans serif”;} CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。选择器的分组 h1,h2,h3,h4,h5,h6 { color: green; } 根据 CSS，子元素从父元素继承属性。如果对body设置 Verdana 字体，则不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体选择器派生选择器 (标签、id、class、属性组合)

css语法特点和引入页面三种方式与其优先级

阅读更多关于 css语法特点和引入页面三种方式与其优先级

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如div{font-size:12px;color:red;font-weight:bold;}文字大小、颜色、字体加粗等。css优势是什么？编写一条css语句控制3个span里面的文本语句颜色，使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。 ☆css样式由选择符和声明组成，而声明又由属性和值组成，/*选择符{属性:值}选择符=>选择器 {属性:值}=>声明*/ 选择符：又称选择器，指明网页中要应用样式规则的元素；声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔; 注意： 1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。 2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内。 CSS注释代码就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用)。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>简单了解css特点,语法和注释</title> 6 <style

CSS Sprites

阅读更多关于 CSS Sprites

CSS Sprites 1.简介 CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中，利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，访问页面时避免图片载入缓慢的现象。 2.优点（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；（2）CSS Sprites能减少图片的字节；（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。 3.缺点（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css

CSS 基础知识

阅读更多关于 CSS 基础知识

CSS 实例(CSS声明总是以分号(;)结束，声明组以大括号({})括起来:) CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 p { color:red; text-align:center; } 关于text-align left 左对齐内容。 right 右对齐内容。 center 居中对齐内容。 justify 对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。 CSS 注释注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。 CSS注释以 "/*" 开始, 以 "*/" 结束 id 选择器如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。以下的样式规则应用于元素属性 id="para1": #para1 { text-align:center; color:red; } 注意:ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。 class 选择器 class 选择器用于描述一组元素的样式，class 选择器有别于id选择器

[css背景]背景颜色透明度

阅读更多关于 [css背景]背景颜色透明度

rgba与opacity 在第一个例子中，我们只让背景颜色变得透明，而第二个例子用到opacity属性，让整个元素都变得透明，包含元素中含的内容。使用opacity把一个元素设置为透明后，将无法再让其子元素变得不那么透明。 body{ background-color: rgba(254,219,207,0.5); } body{ background-color: #FEDBCF; opacity:0.5; } 补充：transparent transparent属性用来指定全透明色彩,transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。在CSS2中，border-color也开始接受transparent作为参数值，《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。在CSS3中，transparent被延伸到任何一个有color值的属性上。来源： https://www.cnblogs.com/L-xmin/p/12395050.html

css透明度属性简介

阅读更多关于 css透明度属性简介

一、透明度设置 opacity 用法： opaticy:0-1; 2.rgba 用法： rgba:(0-255,0-255,0-255,0-1) 透明度取值均为0-1之间。其中，0代表完全透明，1代表完全不透明。注：若取值超出范围（小于0或大于1），那么会就近取合法值。如取1.2则按1显示，取负数按0显示。举例： html: 这里是box1 这里是box2 这里是box3 css: (img) 我们将上例子中的opacity改为rgba再看 ``` css: .box1{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 1);} .box2{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 0.5);} .box3{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 0);} [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JW0lzFqi-1583117743352)(https://i.loli.net/2020/03/01/Zr1d7BPEQ8MOsi3.png)] 二、透明度属性仔细观察上面两个例子

JQuery - 改变css样式

阅读更多关于 JQuery - 改变css样式

jQuery提供 css() 的方法来实现嵌入式改变元素样式， css() 方法在使用上具有多样性。其中一种接受两个输入参数：样式属性和样式值，它们之间用逗号分开。比如我们要改变链接颜色，我们可以使用下面的代码： $("#61dh a").css('color','#123456'); //这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。 //.css(‘color’,'#123456');表示把颜色设为'#123456' 如果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给 css() 方法。示例如下： var divcss = { background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border: '1px solid #CCC' }; $("#result").css(divcss); //这里我们先定义了一个CSS样式属性变量‘divcss’，这类似于建立一个外部CSS文件。 //然后通过jQuery提供的css()方法，把属性赋给ID为'#result'的DIV。另外jQuery提供的 css() 方法还可以用来查看某个元素的css属性值。例如，我们想查看链接的颜色，可以使用下面的代码： $("#61dh a").css

CSS的样式（1）

阅读更多关于 CSS的样式（1）

背景： 1、颜色：　　　 background-color p{backgroud-color:gray;} 2、内边距： {background-color:gray;padding:20px} 3、背景图像： body{background-image:url(/i/eg_bg_04.gif)} 4、背景重复：　　body{background-image:url; background-repeat:repeat(-X/-y} 5、背景定位：改变图像在背景中的位置。 {background-image:url; background-repeat:no-repeat background-position:center/top/botton/left/right} 6、背景大小（size）: 接数字和百分比，建议接数字 7、背景关联： {background-attachment:fixed} 文本： 1、缩进：　　text-indent(正负值）　　p{text-indent:5em(/-5em);} 2、对齐： text-align(center、left、right） 3、文本装饰：　　text-decration(none/underline/overline/line-through/blink) 链接默认地会有下划线。如果想要去掉超链接的下划线

css常用代码大全

阅读更多关于 css常用代码大全

css常用代码大全，html+css代码 html+css可以很方便的进行网页的排版布局，还能减少很多不必要的代码。一.文本设置 1、font-size: 字号参数 2、font-style: 字体格式 3、font-weight: 字体粗细 4、颜色属性 color: 参数注意使用网页安全色二、超链接设置 text-decoration: 参数主要用途是改变浏览器显示文字链接时的下划线。参数取值范围： underline：为文字加下划线 overline：为文字加上划线 line-through：为文字加删除线 blink：使文字闪烁 none：不显示上述任何效果三、背景 1、背景颜色 background-color: 参数 2、背景图片 background-image: url(URL) URL就是背景图片的存放路径，none表示无。 3、背景图片重复 background-repeat: 参数参数取值范围： no-repeat：不重复平铺背景图片 repeat-x：使图片只在水平方向上平铺 repeat-y：使图片只在垂直方向上平铺如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。 4、背景图片固定背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动

CSS 锦囊

阅读更多关于 CSS 锦囊

翻译： onestab [2004.03.09] 原文：mezzoblue CSS Crib Sheet 在使用CSS建站时，您肯定遇到过形形色色的布局问题，最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易，当您遇到困难时为您提供快速参考。有疑问，先验证在调试时，先对您的代码进行验证往往能省去不少麻烦事。格式不正确的 XHTML /CSS 会导致许多布局上的错误。在其他浏览器中进行测试之前，请先在最先进的浏览器中撰写和测试CSS代码，而不是相反。如果您在破旧的浏览器中编写和测试，你的代码就不得不依赖那个破旧浏览器的糟糕的显示，然后在符合标准的浏览器中进行测试，看到显示结果“不正常”时，你会很沮丧的。相反，您应该先将您的代码完善，然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的，你不必再为支持其他浏览器而劳心费神。当然了，目前遵从标准的浏览器无疑就是 Mozilla, Safari 或 Opera。确保您想要的效果真的存在许多特定的浏览器专有的CSS扩展在正式标准中并不存在。如果您对 filter(滤镜) 或滚动条指定样式，您用的就是私有代码，除了 IE 之外，在别的浏览器中毫无作用。如果验证器告诉您代码没有定义，极有可能您用了私有样式，别指望在不同的浏览器中得到一致的效果。如果布局中一定要用浮动对象，别忘了适时使用清除（clear

订阅 css颜色