css颜色

前端学习(8)~css学习(二):背景属性

纵饮孤独 提交于 2020-02-18 21:42:44
background 的常见背景属性 css2.1 中,常见的背景属性有以下几种:( 经常用到,要记住 ) background-color:#ff99ff; 设置元素的背景颜色。 background-image:url(images/2.gif); 将图像设置为背景。 background-repeat: no-repeat; 设置背景图片是否重复及如何重复,默认平铺满。(重要) no-repeat 不要平铺; repeat-x 横向平铺; repeat-y 纵向平铺。 background-position:center top; 设置背景图片在当前容器中的位置。 background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动。 属性值可以是: scroll (与fixed属性相反,默认属性)、 fixed (背景就会被固定住,不会被滚动条滚走)。 另外还有一个综合属性叫做 background ,它的作用是:将上面的多个属性写在一个声明中。 CSS3 中,新增了一些background属性: background-origin background-clip 背景裁切 background-size 调整尺寸 多重背景 上面这几个属性经常用到,需要记住。现在我们逐个进行讲解。 background-color:背景颜色的表示方法 css2.1

hexo自定义css样式

荒凉一梦 提交于 2020-02-18 16:47:45
文章目录 自定义CSS部分 彩色标签 心形转动分类 底栏修改 配置文件解释 站点配置文件 主题配置文件 个人博客 https://www.renke666.top 尽管在配置文件中做了修改美化了博客,但原有样式还是比较简陋,修改的话就需要自定义CSS样式。这也算是美化博客的一大步进展吧,踩了很多坑。 这篇算是博客的美化部分暂时完结之作,花了很多的精力去美化,整体从十二月初断断续续的忙,寒假初期忙了会也算是忙了有两个月吧。果然写博客不是关键,捣鼓才是关键,中间还是学到挺多也挺值得的。然而慢慢捣鼓发现还有很多很多新鲜神奇的东西,目前也没有太多时间,暂且放一边。以后就专心写点东西放上来了,在电脑上写有时东西一多一乱就不好找,这下也算有个地方可以聚合一下。 首先需要HTML+CSS+JS基础,在修改样式时参考了很多博客好的样式,也学到了很多,中间踩了很多坑,基础很关键。回顾前面的美化过程其实走了很多弯路,最好是在有基础的情况下,然后把配置文件详细搞清楚,再大概了解 \themes\next\layout 部分的 .swig 文件的具体格式和用法就能完成的很快,且可以较轻松的自定义各布局。 新版本的hexo自定义CSS需要在 \themes\next\source\css\main.styl 中 // Custom Layer 之后也就是最后增加自己自定义的CSS 写HTML和CSS用

CSS布局

百般思念 提交于 2020-02-18 09:10:41
css布局 --> <!-- background-color 背景颜色 background-image 背景图片 background-repeat 背景图片的重复 repeat-y 只允许在y轴重复 repeat-x 只允许在x轴重复 no-repeat 不重复,只显示一次 background-position 背景图片的定位 取值: 两个,分别表示x和y方向。如果只写一个,则两个值相等 例如:京东、淘宝 五星好评 雪碧图: 各个小图标的集合,使用的目的是减少http的请求 background 是把上面所有的全部合在一起 background : color image repeat position background-size 背景图片的大小 --> 来源: https://www.cnblogs.com/wyx123456/p/10945702.html

前端基础 css基础

怎甘沉沦 提交于 2020-02-17 18:39:42
文章目录 前言 正文 1.css的一些简单介绍 2.页面引入css 2.1 外部样式表 2.2 内部样式表 2.3 行内样式表 3.css选择器 3.1 元素选择器(标签选择器) 3.2 id选择器 3.3 类选择器(class选择器) 3.4 并集选择器 3.5 属性选择器 3.6 后代选择器 3.7 对上面的几种选择器归纳总结 4.常见的属性 4.1 字体属性 4.2 颜色和背景属性 4.3 文本属性 4.4 边框和编号属性 4.5 块元素和内联元素 4.6 浮动、块属性、层属性 总结 前言 昨天写了html的基础,今天趁热打铁再来学学css。不过可能今天的内容就有点多了,记得隔几天回头来复习一下加深印象(骗骗浏览数,嘻嘻嘻) 正文 玩笑归玩笑,不过今天的内容确实很多,现在开始正文。 1.css的一些简单介绍 css:指的是“Cascading Style Sheet(层叠样式表)”,是用来控制网页外观的一门技术。 作用:美化页面 之前说前端三剑客嘛,html,css,js。当然现在有很多很好的js框架出现(比如Angular、React、Vue),这方面框架的学习推荐去B站看技术胖的视频,我们今天只聊聊最基础的css,打好基础之后的学习才会更轻松。 2.页面引入css 三种方法 外部样式表 内部样式表 行内样式表 一般开发的话推荐外部样式表,我举例子的话会用内部样式表

巧妙实现带圆角的渐变边框

北慕城南 提交于 2020-02-17 15:45:43
如何实现下面这个渐变的边框效果: 这个问题本身不难,实现的方法也有一些,主要是有一些细节需要注意。 border-image border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border 的官方规范) 新增的一个属性值。 顾名思义,我们可以给 border 元素添加 image,类似于 background-image ,可以是图片也可以是渐变,不再局限于纯色。 使用 border-image 实现渐变边框 有了 border-image 之后,实现渐变边框变得很方便 不过多介绍 border-image 的语法,读者需要自行了解一下。 实现如下: <div class="border-image"></div> .border-image { width: 200px; height: 100px; border-radius: 10px; border-image-source: linear-gradient(45deg, gold, deeppink); border-image-slice: 1; border-image-repeat: stretch; } 上面关于 border-image 的三个属性可以简写为 border-image:

DIV+CSS的好处和意义

有些话、适合烂在心里 提交于 2020-02-15 23:26:59
  业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?   Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。   如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用   是一样的。 www.120hrb.com   DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码   CSS是CascADIng style Sheets的简称,中文译作“层叠样式表单”,在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。网上冲浪无论你用Internet Explorer还是Netscape Navigator,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页,都有在有意无意地使用 CSS。用好CSS能使你的网页更加简炼,同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB。   Div+CSS标准的优点:   1

css基础

╄→гoц情女王★ 提交于 2020-02-15 15:49:12
CSS,是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS具有以下特点: 1、丰富的样式定义 CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。 2、易于使用和修改 CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的 CSS文件 中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。 3、多页面应用 CSS样式表可以单独存放在一个 CSS文件 中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。 4、层叠 层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。 5、页面压缩 在使用HTML定义页面效果的网站中

html table奇偶行颜色设置 (CSS选择器)

老子叫甜甜 提交于 2020-02-15 08:13:27
:nth-child( n ) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 n 可以是数字、关键词或公式。 下面的例子, 设置表格的奇偶行背景颜色不同;单独设置表格的第1列背景颜色不同。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 table{ 6 height: 200px; 7 width:400px; 8 border:2px solid green; 9 } 10 11 td{ 12 border:1px solid; 13 } 14 15 tr:nth-child(2n){ 16 background:#00CCCC; 17 } 18 19 tr td:nth-child(1){ 20 background:#FFCCCC; 21 } 22 </style> 23 </head> 24 <body> 25 <table> 26 <tr> 27 <td>1</td> <td>2</td> <td>3</td> 28 </tr> 29 <tr> 30 <td>1</td> <td>2</td> <td>3</td> 31 </tr> 32 <tr> 33 <td>1</td> <td>2</td> <td>3</td> 34 </tr> 35 <tr> 36 <td>1</td

常见前端面试题之HTML/CSS部分

馋奶兔 提交于 2020-02-15 07:57:03
Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? Doctype是document type(文档类型)的简写,是用来说明所用的XHTML或HTML是什么版本的。XHTML1.0 提供了三种DTD声明可供选择,分别是:   1、过渡的(Transitional,也叫混杂模式):要求比较宽松,允许继续使用HTML4.01的标识,完整声明为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tranisitional.dtd"> 2、严格的(Strict):要求严格的DTD,不能使用任何表现层的标识和属性,完整声明为 <!DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3、框架的(Frameset):专门针对框架页面设计使用的DTD,如果页面中包含有框架,可以采用DTD,完整声明为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR

CSS的创建和样式

为君一笑 提交于 2020-02-15 00:59:25
如何插入样式表(三种) 外部样式表 在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。 不要在属性值与单位之间留有空格 内部样式表 当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样: <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head> 内联样式(要加双引号,且注意里面是否有空格,有的要加单引号) 由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。 要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距: <p style="color: sienna; margin