【day04】css

一.CSS2.0[Cascading Style Sheets]层叠样式表 1.什么是CSS:修饰网页元素(标记)外观(比如给文字加颜色,大小,字体)的,W3C规定尽量用CSS样式替代XHTML属性 2.XHTML和CSS的关系 XHTML实现是网页结构,CSS修饰网页外观 3.CSS的使用 (1)内联样式(写在标记上的) <标记名称 style="css样式"/> <标记名称 style="css样式">…

【08】css sprite是什么,有什么优缺点

[08]css sprite是什么?有什么优缺点? 概念:将多个小图片拼接到一个图片中.通过background-position和元素尺寸调节需要显示的背景图案. 优点: 减少HTTP请求数,极大地提高页面加载速度. 增加图片信息重复度,提高压缩比,减少图片大小. 更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现. 缺点: 图片合并麻烦. 维护麻烦,修改一个图片可能需要从新布局整个图片,样式. **…

【10】css hack原理及常用hack

[10]css hack原理及常用hack 原理:利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式.常见的hack有1)属性hack.2)选择器hack.3)IE条件注释 IE条件注释:适用于[IE5, IE9]常见格式如下  选择器hack:不同浏览器对选择器的支持不一样 /***** Selector Hacks ******/ /* I…

【01】CSS规范

[01]CSS规范 []https://drafts.csswg.org/indexes/(下图) https://www.w3.org/TR/2011/REC-CSS2-20110607/ https://www.w3.org/wiki/CSS [] https://developer.mozilla.org/en-US/docs/Web/CSS **…

【04】 CSS开发注意事项

[04] CSS注意事项 1. 页面编码规范 1.1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码. 1.2. 全局字体设置: windows 7系统:微软雅黑 Arial: windows XP及以下:新宋体,宋体,Arial MAC默认字体:Helvetica Neue和Helvetica Hiragino Sans GB. font-family:"Microsoft Yahei","Hiragino Sans GB&…

【01】CSS制作的图形

[01]CSS制作的图形绘制五角星: 通过border绘制三角形.然后通过transfrom来旋转35度. 绘制对称的图形,最后绘制顶部的三角形即可. 元素本身,加上:before和:after. 绘制爱心: 矩形,加圆角,加旋转. 绘制倒8: 显然是:三个角是圆角.然后旋转. 绘制开心笑: 四个角圆角.然后右border-right为透明即可. 代码如下: <!DOCTYPE HTML> <html>…

【荐】CSS实现漂亮实用带箭头的流程图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><head><title>[荐]CSS实现漂亮实用…

【转载】CSS 伪类-:before和:after

:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { content: "#"; color: red; } #example:after { content: "$"; color: red; } 这段代码会在#example元素内容之前插入一个'#',以及在内容之后添加一个'$',插入的行内元素是作为#example的子元素,效…

【经验】css

1.父元素overflow:hidden,当父元素大小减小到不容纳子元素时,会出现滚动条.2.input的盒模型尺寸基准是content-box,它的宽度将是以width-border计算,也就是说一个设定width:100px;border:5px solid;的input,其宽度将是90px.3.position:relative 对display:表格类是无效的.http://www.w3.org/TR/CSS21/visuren.html#choose-position 中有说明.4.3…

【转】CSS中的浮动和清除浮动

以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline-block出来后,浮动也有它自己独特的使用场…

Selenium3自动化测试【20】CSS定位元素

CSS 指层叠样式表 (CascadingStyleSheets),CSS一种用来表现HTML或XML等文件样式的计算机语言,其能够灵活的为页面提供丰富样式的风格. CSS使用选择器为页面元素绑定属性(如ID.class等),这些选择器可以被Selenium使用来进行定位元素.CSS较为灵活的选择控件的任意属性,CSS定位元素的速度比xpath速度快. CSS定位是通过find_element_by_css_selector方法. 仍然以bing搜索页为例介绍CSS定位的用法. 要操作Bing搜…

【转】CSS设置DIV背景色渐变显示

[原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColo…

Webkit内核探究【2】——css简介

注:[转载请注明文章来源.保持原样] 出处:http://www.cnblogs.com/jyli/archive/2010/01/31/1660364.html 作者:李嘉昱 CSS在Webkit中的实现属于相对独立的一个模块,注意这里说的是相对. CSS在Webkit中的作用自然是不言而喻的,在Web早期,文档的结构和样式还未分离的那个时代,HTML担负了文档的结构和样式这两个双重任务,即HTML既负责文档的结构,同时文档的样式也通过HTML中通过标签的属性来指定.可想而知,在那个时候HM…

【温故知新】——CSS黑魔法小技巧可以少些不必要的js

前言:这篇文章是转载[前端开发博客]的一篇技术文章,并非本人所写.只是个人觉得很实用,所以分享给大家.原文链接:github.com 1.利用 CSS 的 content 属性 attr 抓取资料需求鼠标悬浮实现一个提示的文字,类似github的这种,如图: 想必大家都想到了伪元素 after,但是文字怎么获得呢,又不能用 JavaScript. CSS 的伪元素是个很強大的东西,我们可以利用他做很多运用,通常为了做一些效果,content:" " 多半会留空,但其实可以在里面写上 …

【疑问】css

1.p{float:left}好像意思是p后面的元素往左浮动的意思啊!!2.ff下,button的文字好像没法垂直居中2.1 button垂直对齐,其line-height似乎需要减2px(依边框宽度而定)3.inline-block同inline有什么区别4.继承得到的font-size有小数点5.<i class="display:inline-block;width20px;height:20px;background:green"></i><p s…

【原创】CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（5）使用放射渐变制作光影效果

阴影效果通常用来表现光线投射在物体上的感觉,如果想制作一个如图5.19所示的文字光影效果,就可以使用背景的线性渐变进行构建. 图5.19可以看到有类似光束照射文字的效果,很好地突出了文字.这实现起来很简单,只需要对文字居中,对背景元素设置从中心发散的放射渐变即可,代码如下: // HTML代码 <div class="box">赞</div> // CSS代码: .box{ width: 200px; height: 200px; font-size: 80px…

【原】CSS实现背景透明，文字不透明，兼容所有浏览器

11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐性节日,以庆祝自己仍是单身一族为骄傲,而如今是各大商家以脱光为由打折促销的时期,成为了所谓的”购物节“,双11也算了,后面还要搞双12,不得不吐槽下. 于是呢,熬夜加班做了11.11的活动,在PC端遇到了透明背景和透明图片的问题,其实以前也遇到过,只是没有总结起来,就忘记了,这次又撞墙了,必须记录下…

【笔记】css hover 伪类控制其他元素

最近在模仿一个网站的项目当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的但是这有一个要求就是添加hover伪类的元素必须是被改变的元素的父类所以,看看一下代码你就会明白的了 html代码 <body> <div class="hover"> <a href="#">滑动</a> <img src="im…

【转】CSS:table-cell详解

table-cell这个家伙在国外的网站中偶有露头,天朝由于IE6.7这两个货泛滥成灾,难有发挥,那么,这个家伙到底能干些什么呢?先让我们来研究下table,那些年曾经使用的table布局为何如此辉煌荡漾呢?她的特点有哪些呢?抛弃table的兼容性.seo.加载等与本文无关的内容不谈,只看属性,那么就两个特点: 1.同行等高. 2.宽度自动调节. 那么table-cell是不是具备这个特点呢?答案是yes,为什么呢?css中有一个有意思的规则"创建匿名表格元素".拿table-cell…

【译】css动画里的steps()用法详解

原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它,于是搜索出了两个案例:typing demo by Lea Verou 和 animated sprite sheet by Simurai点击预览. 这些例子很棒,帮助我开始理解这个特别的timming function,但是它们是如此优秀的例子,以至于在demo之外还是难以理解怎样使用step…

大前端学习笔记整理【二】CSS视觉格式化模型

1. 概念在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型定位策略(正常文档流,浮动或者绝对定位) 和文档树中其他元素的关系额外的信息(比如视口的大小,图片的原始尺寸等) 1.1 视口(viewport) 连续媒体(continuous media)的UA(user agent/用户代理)通常会给用户提供一个视口,一般为一个窗口或者屏幕上的一片可视区域.用户通过这个视口查看文档(document).当视口的大小改变时,…

大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

概览 CSS盒模型,规定了元素框来处理元素的内容.内边距.边框和外边距的方式元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的,所以并不会阻挡其后的元素 * { margin: 0; padding: 0; } 这是在CSS中最常见的初始化CSS的代码,用于覆盖浏览器的默认样式浏览器兼容性大多数浏览器都会按照上面的图示来呈现内容.然而 IE 5 和 6 的呈现却是不正确的.根据 W3C 的规范,元素内容占据的空间是由 w…

【转载】CSS Sticky Footer: 完美的CSS绝对底部

下面是我找到的一个比较完美的方法,来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. <div id="wrap"> <div id="main" class="clearfix"> <div id="content"> </div> <div id="side"> </div…

【原】css实现两端对齐的3种方法

说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面的文本或模块. 响应式网页设计出现以来,更多是使用百分比布自适应布局,特别是在移动端,两端对齐的方式显得越来越重要.那么,如何使用css实现两端对齐,相信很多同学会文本对齐的text-align:justify,这是今天要讲的其中一种方式,另外还有两种更精彩的实现方式,请往下看~ 下图是需要实现的d…

【转】CSS Sprites教程大全（使用方法、工具介绍）

什么是CSS Sprite CSS Sprite 又叫CSS精灵,是目前大型网站中经常运用的图片处理方式.它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中“background-image”属性来定位图片的X/Y轴位置,从而减轻服务器对图片的请求数量,提高网页加载速度.因为对于当前大多数网速而言,不高于200KB的单张图片所需载入时间基本是差不多的,如果页面上有20张小图片或图标,那么服务器会载入20次.但使用CSS Sprite将图片整合成一张大图后,服务器只需要载…

【转】CSS样式覆盖规则

大家都知道CSS的全称叫做“层叠样式表”,但估计很多人都不知道“层叠”二字的含义.其实,“层叠”指的就是样式的覆盖,当一个元素被运用上多种样式,并且出现重名的样式属性时,浏览器必须从中选择一个属性值,这个过程就叫“层叠”.样式覆盖(这种叫法更大众化些)遵循一定的规则,之前我对这个规则一直似懂非懂的,直到这几天看了”CSS: The Missing Manual”,才豁然开朗.下面是我的一些学习笔记. 首先需要明确的是,很多情况都会导致一个元素被运用上多种样式,样式覆盖的规则也需要根据不同的情况来…

【【day04】css】的更多相关文章