css入门二-常用样式总结

基本标签样式

  • 背景色background-color

  • 高度height;

  • 宽度width;

  • 边框对齐以及详细设定举例

    width/*宽度*/: 80%;
    
height/*高度*/: 48px;
    
border/*边框*/:1px solid red;
    
font-size/*字体大小*/: 26px;
    
text-align/*左右居中*/: center;
    
line-height/*根据标签高度自适应垂直居中*/: 48px;
    
font-weight/*加粗*/: bold;

  • 块级标签堆叠

    float属性:
    
    float: left
    
    float: right
    
<div style="clear: both;"></div>

  • 块级标签与内联标签

    块级标签：div标签，h标签、p标签，用不完整块也要占领
    
内联标签：a标签、span标签，用多少占领多少

  • 内边距与外边距

    1. padding内边距、margin外边距
    2. body中的默认margin:8px 就是与网页整体相隔8个像素
    <body style="margin: 0 auto"> 这样设定后div才会与整个页面的上下没有缝隙
    
    <div style="background-color: red;">asdadasd</div>
    
</body>

  • display

    • 重要：内联标签无法设定高度、宽度、padding、margin
    • 举例：
<div style="background-color: red;display: inline;">asdadad</div>

<!--display实现了块级标签与内联标签之间的转换-->

<span style="background-color: red;display: block;">asdadad</span>

<span style="background-color: red;height: 50px;width: 70px">Leon</span>

<!--对于内联标签，无法设置高度height、宽度width、margin、padding，但是块级标签是可以的-->

<a style="background-color: red;height: 50px;width: 70px">Leon123</a>

<!--但是当display:inline-block的时候，默认自己有多少占多少，但可以设置上面四个属性-->

<span style="background-color: red;height: 50px;width: 70px;display: inline-block">Leon</span>

<!--display:none 让标签消失-->

字体

  • 文字大小font-size 
    font-size:14px;
    
font-size:1em;
    
font-size:10%;
    
备注：1em=16px，推荐使用em设置字体大小
  • 文字粗细font-weight 
    font-weight:normal; normal=400
    
font-weight:bold; 加粗
    
font-weight:900;

文本

  • 文本缩进text-indent: 5em;
  • 单词间隔word-spacing: 30px;但是对中文好像没什么作用

链接

a:link {color:#FF0000;}    /* 未被访问的链接 */

a:visited {color:#00FF00;} /* 已被访问的链接 */

a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */

a:active {color:#0000FF;}  /* 正在被点击的链接 */

备注：

1. 为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后

2. 为了使定义生效，a:active 必须位于 a:hover 之后

边框border

<div style="border: 1px solid red">1像素，实体边框</div>

<div style="border: 1px dotted red">1像素，虚线边框</div>

<div style="border-top: 1px dotted red">1像素，上虚线边框</div>

<div style="border: 1px dotted red;border-radius: 10%;display: inline-block">1像素，虚线边框,并设定边框的圆角程度</div>

透明度opacity

<div style="z-index: 9;background-color: #C2C8D4;opacity: 0.3">设定改div的背景的透明度为0.3</div>

over-flow处理不符合元素框的内容

    <!--hidden会只显示div设定的区域，其他的区域将看不到-->

    <div style="height: 200px;width: 200px;overflow: hidden">

        <img src="WechatIMG1611.jpeg" >

    </div>

    <br/>

    <!--下面两种是有滚动条的显示-->

    <div style="height: 200px;width: 200px;overflow: auto">

        <img src="WechatIMG1611.jpeg" />

    </div>

    <br/>

    <div style="height: 200px;width: 200px;overflow: scroll">

        <img src="WechatIMG1611.jpeg" />

    </div>

:hover选择鼠标指针浮动在其上的元素，并设置其样式

        .pg-header .menu {

            display: inline-block;

            padding: 0 10px;

            color: white;

        }

        .pg-header .menu:hover {

            /*当鼠标移动到这个标签的位置的时候，会应用下面的样式*/

            background-color: blue;

            color: #000;

        }

z-index重叠显示顺序

z-index: 9 /*数字越大，在位于最上面*/

css入门二-常用样式的更多相关文章

  1. CSS入门(二)

    一.组合选择器 每个选择器位可以是任意基础选择器或选择器组合 1.群组选择器 可以一次性控制多个选择器 选择器之间用逗号(,)隔开 div,.d1,#div{ color:red; } 2.子代(后代 ...

  2. echart图表控件配置入门(二)常用图表数据动态绑定

    上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...

  3. CSS边框及常用样式

    一.CSS设置样式 1.1 边框border 作用:设置标签周围的边框,方法  board:宽度 样式 颜色,一般情况下样式使用 solid实体的,和dotted虚线的 <head> &l ...

  4. <SpringMvc>入门二 常用注解

    1.@RequestMapping @Target({ElementType.METHOD, ElementType.TYPE}) @Retention(RetentionPolicy.RUNTIME ...

  5. d3入门二-常用 方法

    CSV 版本6.5.0 这里的data实际上是csv中的一行数据 d3.csv("static/data/dept_cpu.csv",function (data) { conso ...

  6. 【干货】Html与CSS入门学习笔记4-8

    四.web镇之旅,连接起来 找一家托管公司如阿里云,购买域名和空间,然后将网页文件上传到购买的空间的根目录下. 1.绝对路径url url:uniform resource locators 统一资源 ...

  7. 前端（二）—— CSS的引入方式、长度与颜色单位、常用样式、选择器

    CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...

  8. 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范

    常用样式制作思路   学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...

  9. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

随机推荐

  1. Asp.net mvc 中View 的呈现(二)

    [toc] 上一节介绍了 Asp.net mvc 中除 ViewResult 外的所有的 ActionResult,这一节介绍 ViewResult. ViewResultBase ViewResul ...

  2. spring中Bean对象的生命周期

    经过测试对于具体的一个Bean,执行的流程应该是: 1.实例化: 常见的有构造(有参.无参)实例化.静态工厂(方法是静态,通过类名.方法返回获取).实例工厂(专门有个类负责生产对象,需要在bean中配 ...

  3. substr与substring的用法

    substr substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符. 语法 str.substr(start[, length]) 参数 strat 开始提取字符的位置.如果为负值, ...

  4. python可用ORM之Pony

    Pony是Python的一种ORM,它允许使用生成器表达式来构造查询,通过将生成器表达式的抽象语法树解析成SQL语句.它也有在线ER图编辑器可以帮助你创建Model. 示例分析 Pony语句: sel ...

  5. jQuery源码逐行分析学习01(jQuery的框架结构简化)

    最近在学习jQuery源码,在此,特别做一个分享,把所涉及的内容都记录下来,其中有不妥之处还望大家指出,我会及时改正.望各位大神不吝赐教!同时,这也是我的第一篇前端技术博客,对博客编写还不是很熟悉,美 ...

  6. 使用TensorFlow Object Detection API+Google ML Engine训练自己的手掌识别器

    上次使用Google ML Engine跑了一下TensorFlow Object Detection API中的Quick Start(http://www.cnblogs.com/take-fet ...

  7. 浅谈JavaScript的事件（事件处理程序）

    事件就是用户或者浏览器自身执行的某种动作.诸如click.load和mouseover,都是事件的名字.而响应某个事件的函数就叫事件处理程序.事件处理程序的名字以"on"开头,比如 ...

  8. BZOJ 1042: [HAOI2008]硬币购物 [容斥原理]

    1042: [HAOI2008]硬币购物 题意:4种硬币.面值分别为c1,c2,c3,c4.1000次询问每种硬币di个,凑出\(s\le 10^5\)的方案数 完全背包方案数? 询问太多了 看了题解 ...

  9. POJ1269 Intersecting Lines[线段相交 交点]

    Intersecting Lines Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 15145   Accepted: 66 ...

  10. neo-thinsdk-cs 之 thinWallet 接入私链

    neo-thinsdk-cs 之 thinWallet 接入私链 2017年底刚开始接触区块链,目前在被 NEO 折磨. 一开始被官方文档和 NEO-GUI 搞得体无完肤(尤其是传说中的 F12),也 ...