CSS基础必学列表

CSS width宽度

CSS height高度

CSS border边框

CSS background背景

CSS sprites背景拼合

CSS float浮动

CSS margin外边距

CSS padding内边距

CSS color字体颜色

CSS font-size字体大小

CSS font-family字体

CSS font-weight字体加粗

CSS display显示与隐藏

CSS overflow隐藏与滚动条

CSS position定位

CSS text-align内容水平位置

CSS text-indent缩进

CSS text-decoration下划线

CSS clear清除浮动

CSS cursor鼠标手势光标

CSS font文本

CSS font-style文本斜体

CSS font-variant缩小大写字母

CSS id CSS class

left right top bottom

css letter-spacing字间距

CSS line-height行高

css min-width最小宽度

css max-width最大宽度

CSS min-height最小高度

css max-height最大高度

CSS text-transform英文大小写

css text-overflow省略号

CSS white-space不换行

css z-index重叠顺序

letter-spacing; 来设置字与字间距_字符间距离，字体间距css样式

margin:0 auto;div居中

text-align:center；文字居中

border-radius:5px;圆角边框

 position: absolute;绝对定位

 position: relative;相对定位

box-shadow: 0px 0px 0px 10px #ccc;边框阴影

opacity: 1; cssdiv透明度

cursor: pointer;所有div移上去显示手型

 文字效果（a链接样式去除）

text-decoration:none 无装饰，通常对html下划线标签去掉下划线样式

text-decoration:underline 下划线样式

text-decoration:line-through 删除线样式-贯穿线样式

text-decoration:overline 上划线样式

cursor其他取值  

auto                    ：标准光标

default                 ：标准箭头

pointer, hand                   ：手形光标

wait                     ：等待光标

text                      ：I形光标

vertical-text          ：水平I形光标

no-drop                ：不可拖动光标

not-allowed           ：无效光标

help                     ：帮助光标

all-scroll         ：三角方向标

move                     ：移动标

crosshair           ：十字标

e-resize

n-resize

nw-resize

w-resize

s-resize

se-resize

sw-resize

line-height 行高

选择器

 .oang4:hover{

         background-color: red;

     }鼠标经过样式变红色

{

p:before

{

content:"台词：";

}在每个 <p> 元素的内容之前插入新内容：

p:after

{

content:"台词：";

}在每个 <p> 元素的内容之后插入新内容

    width: 50px;  /*必须设置宽度*/

    overflow: hidden;  /*溢出隐藏*/

    text-overflow: ellipsis; /*以省略号...显示*/

    white-space: nowrap;  /*强制不换行*/

}文字超出隐藏

 用<p></p>标签写文本时，控制行与行之间的高度最好用line-height，不要用margin或padding；

margin-left 对象左边外延边距 （margin-left:5px; 左边外延距离5px）

margin-right 对象右边外延边距 （margin-right:5px; 右边外延距离5px）

margin-top 对象上边外延边距 （margin-top:5px; 上边外延距离5px）

margin-bottom 对象下边外延边距 （margin-bottom:5px; 下边外延距离5px）

display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。

display:block;转换为块级元素。

display:inline;转换为行内元素。

display:inline-block;转换为行内块级元素

HTML基础必学列表

html标签大全

<html>标签

html div标签

html span标签

html a超链接标签

html br换行标签

html p段落标签

html br与p区别

H1 H2 H3 H4标题标签

html px em pt长度单位

html b加粗标签

html strong加粗标签

html b与strong区别用法

html em强调标签

html i斜体标签

html u下划线标签

html s贯穿线标签

html img图片标签

html sub下标 sup上标

html nobr强制不换行

html hr水平线标签

html form表单标签

html label标签

html input标签

Html textarea文本框标签

Html select下拉表单

html checkbox多选框

html radio单选框

html font颜色

HTML iframe框架标签

html table tr td th表格

html dl dt dd标签

html font标签

html ol li列表

html ul li列表

html注释

html base标签

html title标签

html link标签

html script标签

html meta标签

html head标签

html style标签

margin:0 auto;边框居中

<audio></audio>h5标签 播放音频

hidden="true"

loop=false

controls="controls"

语义标签：

<article>定义文章</article>

<aside>定义文章侧边栏</aside>

<figure>定义一组媒体对象以及文字内容</figure>

<figcaption>定义figure的标题</figcaption>

布局页面时用的语义标签：

<nav>定义导航</nav>

<header>头部</header>

<section>定义文档中的区段 区域</section>

<footer>尾部</footer>

input其他的类型：

1. text 文本输入框

2. password 密码

3. button 按钮

4. checkbox 复选

5. radio 单选

6. submit 提交

7. reset 重置

8. file 文件

9. email 输入邮箱地址 检测@

10. url URL地址

11. number 只能输入数字 还有e

12. range 范围 默认0~100

required 必须填写

placeholder 占位符

hidden 隐藏域

功能标签：

<video src="" autoplay自动播放 controls控制播放 loop是否重复播放 preload是否自动加载>定义视频</video>

<audio src="">定义音频</audio>

<mark>标记</mark>

<iframe src="" frameborder="0">内嵌网页框架</iframe>

<canvas>定义图形提供画布</canvas>

2.流式布局

即百分比布局。（宽度， 高度，边距，rem，定位值）

尺寸百分比 = 目标元素的宽度（高度）/ 父级的宽高

定位值百分比 = 目标元素的定位值 / 父级的宽高

margin和padding / 父级的宽度

em rem

em: 针对父级来设置自身

rem: 针对html

3.媒体查询

可以根据不同屏幕尺寸，动态的修改网页布局以及样式，是响应式网站不可缺少的一部分

only 可以省略 多个条件用and相连

@media only screen and (min-width:500px) and (max-width:700px){......}

link:

<link rel="stylesheet" href="" media="screen and (min-width:500px) and (max-width:700px)">

响应式网站：由两种办法完成响应式网站, 流式布局和媒体查询，通常情况下相辅相成共同完成响应式网站。

4.前缀

腾讯：国内唯一有自己内核的公司，X5。（X5的浏览器内核是基于早起的webkit内核开发出来的，而后自己优化。QQ浏览器 微信）

-webkit-: 谷歌前缀，谷歌内核（猎豹 360 safari）

-o-: 欧朋 （已经摒弃自己的内核，转战谷歌的阵营）

-ms-: 微软 ie 斯巴达

-moz-: 火狐 ff

//this.setAttribute('src', url);

常用 css html 样式的更多相关文章

  1. 常用css初始化样式（淘宝）

    最简单粗暴的css初始化样式就是:*{padding:0:margin:0}(不推荐) 淘宝的样式初始化: body, h1, h2, h3, h4, h5, h6, hr, p, blockquot ...

  2. 获取jQuery对象的第N个DOM元素 && table常用css样式

    获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...

  3. CSS: CSS常用的文本样式属性

    介绍:CSS常用的文本样式属性 color:  颜色 font-size:  字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...

  4. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  5. 11种常用css样式之表格和定位样式学习

    table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...

  6. 11种常用css样式之鼠标、列表和尺寸样式学习

    鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...

  7. 11种常用css样式之border学习

    边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-st ...

  8. 11种常用css样式之background学习

    background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的backgroun ...

  9. 11种常用css样式之开篇文本字体学习

    常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spaci ...

随机推荐

  1. gamemakerstudio:Sprite的原点

    对于某些类型的游戏,例如飞行射击游戏或者顶视角的2D游戏,通常会直接选取图片的中心做为原点.但对于<冰杖秘闻>这样的 2D ARPG 来说,会更多的从三维场景的角度来选择原点,即选择物品底 ...

  2. 常用的shell语句 【awk】去重，排列

    目的:从日志access.log中,筛选出IP来,并统计每个IP出现的次数,然后显示出来. 因为:awk = 扒IP  shot = 排序  uniq =  去重 所以:awk '{print $1} ...

  3. LAB2 软件测试 Selenium上机实验 2017

    1.安装SeleniumIDE插件 打开Firefox——>菜单栏——>附加组件——>获取附加组件——>查看更多附加组件——>搜索框输入SeleniumIDE并查找——& ...

  4. 欢迎来到“火龙族智者”的blog

    本blog里有每天更新的比赛感想,新技术体会以及日语学习相关事宜. 主要研究方向是算法,信息安全以及日语. 希望各位能常来看看.

  5. 初次接触《C++程序设计原理与实践》一书

    前两天读书日,买了些书回来看.__Bjarne Stroustrup__的<C++程序设计原理与实践>便是其中一本.其实也没看完,只看了第0章-致读者,大师不愧是大师,只看了一章就让心生共 ...

  6. hdu1215 七夕节---因子和

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1215 题目大意: 求N的因子和(不包括N本身) 解题思路: 模板传送门 #include<io ...

  7. iOS UI（布局）约束是什么？view1.attr1 = view2.attr2 * multiplier + constant

    /* Create constraints explicitly.  Constraints are of the form "view1.attr1 = view2.attr2 * mul ...

  8. Apache轻量级性能測试工具－－ab

    Apache轻量级性能測试工具--ab ab早已不是什么新奇玩意,平时工作中会须要一些性能測试.简单的性能測试全然能够由AB来替代,而不须要动用LR这样重量级的工具. 此文简介一下ab的工具使用与结果 ...

  9. PHP语言开发微信公众平台（订阅号）之注册（1）

    1.百度搜索"微信公众平台" 2.选择微信公众平台官网并单击打开 3.进入官网页面,单击 "立即注册" 进入注册页面 4.进入注册页面,单击订阅号 5.进入订阅 ...

  10. Array GCD CodeForces - 624D (dp,gcd)

    大意: 给定序列, 给定常数a,b, 两种操作, (1)任选一个长为$t$的子区间删除(不能全部删除), 花费t*a. (2)任选$t$个元素+1/-1, 花费t*b. 求使整个序列gcd>1的 ...