css颜色

CSS background-color 属性 transparent 值(透明,背景色,无背景色)

谁都会走 提交于 2020-03-12 10:02:30
解决的问题: input 标签,要求背景透明,谷歌可以用rgba,但是需要兼容IE8,IE8上不支持rgba 。 当你想着 rgba 透明怎么兼容IE8的时候,不如换个角度想想,是不是可以直接去掉默认的背景颜色。 定义和用法 background-color 属性设置元素的背景颜色。 元素背景的范围 background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。 transparent 值 尽管在大多数情况下,没有必要使用 transparent。不过如果您不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置 transparent 值还是有必要的。 不常用的,两个值,需要做个笔记,记录一下。 希望可以帮到你。 by不言谢 来源: https://www.cnblogs.com/byx1024/p/12467228.html

Web开发知识点总结

岁酱吖の 提交于 2020-03-12 06:51:18
HTML前言:这是一篇简单的 web 开发知识点的总结,适用于刚开始学习编程的人来学习的。我是为了能够在熟记熟记这些知识点而总结的一篇文章。 1 什么是浏览器? (1) 浏览器就是接收浏览者的操作 ( 打开一个网址,点击一个链接,点击一个按钮 ) ,然后帮助浏览者去 Web 服务器请求网页内容( HTML 格式返回),然后展现成人眼能够看得懂的可视化页面的软件。 (2) IE== 浏览器?这句话是错误呢。 IE 是浏览器的一种,还有 FireFox , Opera , Chrome 等,注意遨游 (Maxthon) ,世界之窗,搜狗浏览器, 360 浏览器等并不是一种独立于 IE 的浏览器,其内核还是 IE 的内核,只不过是换了一个外壳而已,所以用遨游的不能嘲笑用 IE 的,否则就露怯了。 (3) 所谓 Trident 引擎就是 IE 的 WebBrowser 控件,现在很多非 IE 核心的浏览器用的是 Trident 引擎,比如遨游 3 和搜狗的双核, Chrome,Safari 。 2 静态页面,动态页面 (*) (1) 网站页面分为静态页面和动态页面 1) 静态页面:有一个 Html 页面文件保存在服务器上,浏览器需要这个页面的时候就把这个页面文件发给浏览器。 2) 动态页面:服务器上没有浏览者要看的页面,而是服务器动态生成的 Html 页面发给浏览器

Css常用属性(背景,字体,div盒子等)

我怕爱的太早我们不能终老 提交于 2020-03-10 19:44:13
Css常用属性(背景,字体,div盒子等) 1.背景 1.背景颜色:background-color 2.将图像设置为背景:background-image:url(); 3.设置图像是否平铺:background-repeat:no-repeat 或 repeat-x 或repeat-y 4.设置背景图片是否随滚动条一起移动:background-attachment:fixed;固定住。 inherit:规定应该从父元素继承 background-attachment 属性的设置。 默认属性scroll 5. background :背景色 背景图片 平铺方式 background-color : red ; background-image : url(../img/logo.gif) ; background-repeat : no-repeat ; background-attachment : fixed ; background : #c9c9dd url(../img/logo.gif) no-repeat ; 2.字体 1.字体是否倾斜:font-style:normal(默认值);italic或oblique显示倾斜字体;inherit规定应该从父元素继承字体样式。 2. 加粗:font-weight:normal(默认值);bold 定义粗体字符;bolder

如何写出优雅的css代码 ?

拈花ヽ惹草 提交于 2020-03-08 08:02:10
如何写出优雅的css代码 ?    对于同样的项目或者是一个网页,尽管最终每个 前端开发工程师 都可以实现相同的效果,但是他们所写的代码一定是不同的。有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护;而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了。那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正。 如何整理一个项目。 如何写出清晰易懂的HTML代码。 如何写出优雅的css代码(重点)。 第一部分:如何整理一个项目。    当我们接手一个表白墙的小项目时,怎么去分类整理呢?是把所有的html文件、css文件、js文件和图片等等混乱的放在一起?好吧,那就看看这样是什么效果吧?    可能你会觉得这没有什么啊?文件都可以找到啊,但是你试图在sublime编辑器中打开看看是什么效果:   ( 补充说明:博友@Tabweng 建议文件名不要使用中文而尽量使用英文,在此表示感谢,希望大家也可以注意这个问题。 )    有没有觉得很混乱呢?! 此外,如果项目更大了呢?你需要的html文件、css文件、js文件、以及图片的需求量更大了呢?你还能保证可以顺利的找出每一个你想要的文件并编辑吗?显然显然是否定的。所以对于这种项目

前端(三)-----css入门

别来无恙 提交于 2020-03-08 02:10:11
网页美容师 1. css========cascading style sheets 美化样式 ----内部样式 ----行内样式 ----外部样式 2.内联样式 又称行内样式 <标签名 style="属性1:属性值1; 属性2:属性值2; "> 内容 </标签名> 作用范围:当前以及子标签起作用 3. 外部样式表 实际工作开发中以此为主 链入式是将所有样式放在一个或多个.css为扩展名的外部样式表文件中 通过link标签将外部样式文件链接到html文档中,其基本语言格式如下: <head> <link href="css文件的路径" type="text/css" rel="style.sheet"> </head> 1.单标签 2.必须在head头部标签中 3.必须指明3个属性 四.内部样式表 <head> <style> 选择器{属性:值} </style> </head> 选择器是用于选择标签的 五.项目格式 项目1======html css 文件 .style.css web工程 包括 css文件夹,images文件夹,js文件夹,index.html文件夹 六. 选择器 h1{ color:red; font-size:25px; } 1.选择器用于指定 css样式作用的html对象 2.属性以k-v的形式设置样式属性,字体大小,文本颜色等 3,之前以;相连接 1

如何仿建网站?附带个人博客样式搭建实例

爱⌒轻易说出口 提交于 2020-03-07 13:59:16
本文及技术仅供学习,请勿用于其他用途 更新记录 【1】2020.03.06-16:51 1.完善内容 正文 前言 本教程的博客园样式实例不公布完整css代码,白嫖党请走开,氪金大佬另谈 本教程为初级篇,未涉及JavaScript 我们每天都会在在博客园写博客,看博客,时间久了,未免对这千篇一律的博客皮肤感到烦躁 那能不能想办法更改呢 答案是可以的 有的人可能会问,我自己又没有什么编程基础(那你来博客园干啥awa),更何况不会css,该怎么办呢? 肯定是学习 + 看教程喽 本文就是一篇附带实例的教程 那么,你要做的就是学习 根据个人实际经历来看,我建议你 8天学习HTML(个人实际5天) 8天学习css(个人实际10天) 10天学习JavaScript(个人实际10天) (本人有一定的编程基础) 然后就能达到随心所欲的修改博客园皮肤的水平了 想达到专业水平还是老老实实的学上半年再说吧 好了,回归正题 仿建网站的前提是千万不要侵权,即使是做个皮肤自己欣赏欣赏,也要记得加上原网站的链接 首先你要选择一个你认为满意的网站 然后学习它的源代码 然后自己在博客园码一些css的东西 就这么简单 下面还是让我们边看实例边说话 实例时间 先放张图片感受一下 图1 原网站 图2 个人博客园皮肤 没错,是高仿 首先先让我们来看一下原来的样子 图3 无css 没错,非常磕碜(不磕碜我就不改了awa)

CSS 锦囊[收藏]

微笑、不失礼 提交于 2020-03-07 02:27:30
onestab 关闭了,希望不是永久的。还好做了镜像,收下几篇值得收藏的文章。 CSS 锦囊 最后更新:2004.03.05 翻译: onestab [2004.03.09] 原文:mezzoblue CSS Crib Sheet 在使用CSS建站时,您肯定遇到过形形色色的布局问题,最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易,当您遇到困难时为您提供快速参考。 如果您有所补充, 请在这里发表您的意见 . 本文的其他语言版: 法语 , 德语 , 西班牙语 和 匈牙利语 。 欢迎提供其他翻译。 有疑问,先验证 在调试时,先对您的代码进行验证往往能省去不少麻烦事。格式不正确的 XHTML /CSS 会导致许多布局上的错误。 在其他浏览器中进行测试 之前 ,请先在最先进的浏览器中撰写和测试CSS代码,而不是相反。 如果您在破旧的浏览器中编写和测试,你的代码就不得不依赖那个破旧浏览器的糟糕的显示,然后在符合标准的浏览器中进行测试,看到显示结果“不正常”时,你会很沮丧的。相反,您应该先将您的代码完善,然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的,你不必再为支持其他浏览器而劳心费神。当然了,目前遵从标准的浏览器无疑就是 Mozilla, Safari 或 Opera。 确保您想要的效果真的存在 许多特定的浏览器专有的CSS扩展在 正式标准 中并不存在。

汇总css布局模型和常见代码缩写与长度单位

自古美人都是妖i 提交于 2020-03-07 00:19:45
知识点一:css布局模型:布局模型是建立在盒模型基础之上,在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.层模型(Layer)。 一、流动模型:默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的‘;特征1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,原因?默认状态下,块状元素的宽度都为100%,导致块状元素都会以行的形式占据位置。特征2.内联元素都会在所处的包含元素内从左到右水平分布显示。 二、浮动模型:块状元素独占一行,如果想让两个块状元素并排显示,怎么办呢?通过浮动使元素脱离默认文档流。 拓展阅读: float布局打破标准流,神助攻clear清浮动 三、层布局模型:层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>流动模型、浮动模型</title> 6 <style type=

web前端01

守給你的承諾、 提交于 2020-03-06 17:48:38
l W3C标准:结构(HTML描绘页面骨架),样式表现(CSS),行为(JS) l Html(超链接标记文本),纯文本只能保存文本内容,音频视频都不能。 l 纯文本作为网页后缀html l 标签:用标签标记一级标题等。 <标签名(如:h1)> 标签有开始也有结束, <h1>this my firt web</h1>. l 根标签<\html>(一个页面只有一个根标签),所有内容均写到根标签里面 l 有两个子标签, <html><head></head><body></body></html> ,head body 兄弟标签 l 标准结构 <!doctype html> <html> <head> <meta character="utf-8" /> <title></title>(显示在网页的标题栏) </head> <body> <!--在这个结构中编写注释--> <h1>这是我的<font color="red"></h1> <h2> </h2> <h3> </h3> <p>楚河<br /> 汉界<br /> </p> </body> </html> l Head标签内容不显示在用户端,设置信息让浏览器看从而帮助浏览器解析 l Body显示用户页面中所有可见内容 l 不希望别人动可以写注释 l 超链接里的字就是tittle l <font></font> 设置字体

『Web前端』 CSS入门(9)——CSS 背景

隐身守侯 提交于 2020-03-03 19:23:38
CSS 背景 CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。 CSS 在这方面的能力远远在 HTML 之上。 背景色 可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。 这条规则把元素的背景设置为灰色: p { background-color : gray ; } 如果您希望背景色从元素中的文本向外少有延伸,只需增加一些内边距: p { background-color : gray ; padding : 20px ; } 示例: <html> <head> <style type="text/css"> body { background-color : yellow } h1 { background-color : #00ff00 } h2 { background-color : transparent } p { background-color : rgb ( 250,0,255 ) } p.no2 { background-color : gray ; padding : 20px ; } </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <p>这是段落</p> <p class= "no2" >这个段落设置了内边距。</p> <