继承盒模型以及CSS常用样式

serif 衬线字体 serif

sans-serif 非衬线字体 sans serif

line-through 删除线 line-through
text-shadow : x y 模糊度 颜色 shadow

background-size:

background复合样式:#fff url() no-repeat scroll x,y

outline

sprite sprite

继承

继承(inherit)子元素会自动拥有父元素的某些CSS属性。

可被继承:文本类属性会被继承
不可被继承:外内边距,背景颜色
传递性

继承发生要满足两个条件:
该属性是可继承的属性
该属性在样式表中没有声明

强制继承

也叫显示继承,是指将css设置为inherit。
两个原因:为了继承不能继承的元素
为了继承已被声明过的属性

获得值的计算过程:无属性值—确定声明值—层叠冲突—使用继承—使用默认值—每个层都有值

background-color的默认值:transparent(透明)

盒模型

display:bolck/none/inline/inline-block

block:
占据所有可用的宽度
通常用于较大的内容块,比如标题或结构元素
独占一行
可设置高宽

inline:

只占据内容所需的宽度,在同行显示
通常用于较小的内容块
由内容撑开高宽

ps:行内元素不能嵌套块元素

inline-block:

input、img

盒模型

content—padding—border—margin

padding值不能为负

自动换行又叫断词

overflow:scroll/hidden

ps:父级尽量不设置高宽

顺时针方向显示像素值缩写

垂直方向外边距会合并,两值不同时取大值。
外边距可取值为负。

字体

font-family:“a”,“b”,serif/sans-serif; 衬线字体和非衬线字体

ps:非衬线为主,衬线一般用于比较大的字上

font-style:obique/italic/normal 默认强行切斜/设置为倾斜/正常

文本

text-indent:2em/px 值可为负
text-decoration:none/underline/overline/line-through
没有/下划线/上划线/删除线
letter-spacing 字距
word-spacing 词距

顶线、中线、基线、底线

text-shadow:x y 模糊度 颜色 背景偏移量

背景/background

以视口为基准显示内容

background-attchment:fixed/scroll

background-size: px/%

background复合样式:#F00 url() no-repeat scroll x y;

边框/border

border:常用样式
outline:1、辅助用,不产生像素 2、去掉文本框蓝色线条

拼合图/雪碧图

sprite

定了视口再插入图片

时间: 2024-12-15 18:20:55

继承盒模型以及CSS常用样式的相关文章

CSS常用样式及示例

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

CSS常用样式(四)之animation

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

css常用样式属性详细介绍

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

css常用样式设置

设置用户不能选择文字: body, .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explor

CSS常用样式

一.字体样式(font) 1. font-style :指定文本字体样式. 取值: 1)normal:指定文本字体样式为正常的字体(默认值) 2)italic:指定文本字体样式为斜体.对于没有设计斜体的特殊字体,如果要使用斜体外观将应用oblique. 3)oblique:指定文本字体样式为倾斜的字体.人为的使文字倾斜,而不是去选取字体中的斜体字. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UT

css随笔1(css常用样式)

样式 属性 大小 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常用样式(三)

一.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>

CSS常用样式(一)

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

CSS常用样式(二)

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