CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言.相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示…

上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观. animation animation的实现需要通过keyframes来实现.keyframes(关键帧),类似于flash当中的关键帧.关键帧有其自己的语法规则,他的命名是由"@keyframes"开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样…

1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p></div> -- 对 <a href="#"><span></span></a> -- 对 <span><div></div></span> -- 不合理 2. 块级元素不能…

CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-spacing改变了文字的间距,direction改变文本从左至右的阅读顺序,white-space处理字符间空白text-transform实现文字大小写text-align改变文字排版对齐,至于我们常看到的产品介绍中的省略号“...”如何实现以及文字如何贴图对齐,尽在下面代码详情中一一介绍. <!…

CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通常这样写font-family:"黑体", "宋体","Microsoft YaHei" font-size控制字体大小,我们设置字体大小是设置它的宽度,它的高度一般电脑系统默认字体大小是16px,所以字体大小尽量不要低于16px,1em=16px:…

1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style 规定文本的字体样式.主要有normal, italic,oblique font-weight 规定字体的粗细.主要有normal, bold,自定义粗细 color 设置文本颜色 letter-spacing 设置字符间距 line-height 设置文本行高 text-align 设置文本的对齐方式,有…

对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级点的,这才是一个靠谱的渐进过程,下面列出一些css常用属性,仅供参考 “文字”属性共有8项: 1.“字体”(font-family),设定时,需考虑浏览器中有无该字体. 2.“大小”(font-size),注意度量单位. 3.“粗细”(font-weight),除了normal(正常).bold(粗…

元素边框显示圆角:-moz-border-radius适用于火狐浏览器,-webkit-border-radius适用于Safari和Chrome两种浏览器. 浏览器渐变背景颜色: FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8); /*IE789*/ background:-moz-linear-gradient(top,#b8…

大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap  ——用于最外层 头部:header  ——用于头部 主要内容:main  ——用于主体内容 左侧:main_left  ——左侧布局 右侧:main_right  ——右侧布局 导航条:nav  ——菜单 内容:content  ——中部主体 底部:footer  ——用于底部 css样式文件命名 主要的:master.css 布局.版面:layout.css 专栏…

CSS font 属性 参考:W3school- CSS font 所有浏览器都支持 font 属性,可在一个声明中设置所有字体属性,各属性需按顺序,语法如下: selector{ font:style weight size/line-height font-family } 常用值: 值 描述 font-style 规定字体样式 font-weight 规定字体粗细 font-size/line-height 规定字体尺寸和行高 font-family 规定字体系列 font-variant…

1. 通用样式 Base.css * { margin:; padding:; } body { width: 1000px; margin: 0 auto; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #969696; } a { text-decoration: none; color: #93B300; } a:link { text-decoration: none; } a:vi…

一.2D变换 1.transform   设置或检索对象的转换 取值: none::以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵 translate(<length>[, <length>]).第一个参数对应X轴,第二个参数对应Y轴.如果第二个参数未提供,则默认值为0. translateX(<length>):指定对象X轴(水平方向)的平移 translateY(<length>…

一.边框样式 1.border:复合属性.设置对象边框的特性. 取值: border-width: 设置或检索对象边框宽度. border-style: 设置或检索对象边框样式. border-color: 设置或检索对象边框颜色. #border4 { width: 100px; height: 100px; border:1px solid #FF0000; } <div id="border4"></div>   2.border-width:设置对象的边…

一.字体样式 1.font-style:设置或检索对象中的文本字体样式. 取值: normal:指定文本字体样式为正常的字体 italic:指定文本字体样式为斜体.对于没有斜体变量的特殊字体,将应用oblique oblique:指定文本字体样式为倾斜的字体 2.font-variant:设置或检索对象中的文本是否为小型的大写字母. 取值: normal:正常的字体       small-caps:小型的大写字母字体 3.font-weight:设置或检索对象中的文本字体的粗细. 取值: no…

样式 属性 大小 font-size(x-large ; xx-small ; 可用数值单位 : PX,PD) 样式 font-style(oblique 偏斜体 : italic 斜体 : normal : 正常) 行高 line-height(单位 : PX,PD,EM) 粗细 font-weight(bold 粗体: lighter: 细体: normal : 正常) 修饰 text-decoration(underline 写划线 : overline 上划线 : line-throug…

css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-attachment:fixed; //背景固定,不随字体滚动 background-attachment:scroll; //背景是随着字体滚动的 background-repeat:no-repeat ; //no-repeat 不平铺 repeat 平铺 repeat-x 横向平铺 repeat-y…

css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个声明中,background背景属性常见为以下这些:.background-color代表背景颜色   .background-image代表背景图像   .background-repeat 代表背景图像水平或者垂直平铺  .background-attachment代表背景图像是否固定或者随着页面的其余部分滚动   .background-position代表设置背景图像的起始位…

border  边框 简写:border:1px solid #000; 等效于:border-width:1px;border-style:solid;border-color:#000; 顺序:border-width | border-style | border-color border-style border-radius  圆角半径 设置或检索对象使用圆角边框.提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2…

*{margin:0px;padding:0px;}/*内外边距初始化*/html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input, textarea, ul, ol, li, hr { margin: 0;padding: 0;}/*去除 list 默认样式*/ul, ol {list-style-type: none;}/*去除 a 标签默认样式*/a {text-decoration: none;}/*左右浮动*/.fl {f…

background-attachment: fixed 随着页面的滚动轴背景图片不会移动 background-attachment: scroll 随着页面的滚动轴背景图片将移动 background-attachment:inherit继承 background-color:背景颜色 background-image:背景图片 background-position:背景图片的位置 (注:位是从左上角x,y方向开始的) background-repeat:背景平铺 repeat(完全平铺)…

CSS background 属性 参考:W3school- CSS background 所有浏览器都支持 background 属性,其简写形式,在一个声明中设置所有的背景属性,各属性需按顺序,语法如下: selector { background: color image repeat attachment position; } 可设置如下属性: 值 描述 CSS background-color 规定要使用的背景颜色 1 background-image 规定要使用的背景图像 1 ba…

一.背景颜色 background-color 属性名:background-color 作用:在盒子区域添加背景颜色的修饰 加载区域:在 border 及以内加载背景颜色 属性值:颜色名.颜色值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="…

文字三属性 1.颜色color 2.字体font-family ① 常用字体 常用的中文字体: 宋体  SimSum 微软雅黑 Microsoft YaHei 常用的英文字体: 如果不设置字体属性,不同的浏览器有自己的默认字体. ② 注意事项 a. font-family 可以设置多个字体名称,在实际加载时只会选择一种加载,选择依据是按书写顺序进行,如果浏览器不支持第一个字体,则会尝试下一个,直到找到第一个支持的字体. b. 浏览器中加载的字体是用户机器中自带的,如果用户的电脑中没有设置的字体则…

border: border-width border-style border-color (边框属性) 全部属性 div {width:100px; height:100px; border-style:solid; border-width:1px; border-color:#ccc;} 缩写属性 div {width:100px; height:100px; border:1px solid #ccc; } border-radius 圆角效果 div {border-radius:3…

1. border-radius - 指定每个圆角 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角 一个值: 四个圆角值相同 2. linear-gradient   渐变 Internet Explorer 9 及之前的版本不支持渐变.…

一.input和textarea修改placeholder的颜色: input::-webkit-input-placeholder { /* WebKit browsers */ color: #ccc; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #ccc; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #ccc; } input::…

一.简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉CSS,可以快速浏览以下内容.不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下. 在讲解样式表语法前,我们先看一个例子: /*按钮普通态*/ QPushButton { /*字体为微软雅黑*/ font-family:Microsoft Yahei; /*字体大小为20点*/ font-size:20pt; /*字体颜色为白色*/ color:white; /*背景颜色*/ bac…

1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; 2.设置溢出文本显示为省略标记: text-overflow:ellipsis; (注:text-overflow:clip | ellipsis | ellipsis-word;…

属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val"] E[att*="val"] E[att|="val"] 伪对象选择符  E:first-letter/E::first-letter 设置对象内的第一个字符的样式. <p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青.远足之类的.长期坐…

css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高度*/: 48px; border/*边框*/:1px solid red; font-size/*字体大小*/: 26px; text-align/*左右居中*/: center; line-height/*根据标签高度自适应垂直居中*/: 48px; font-weight/*加粗*/: bol…