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. python并发编程之多进程（理论）

    一.什么是进程 进程:正在进行的一个过程或者说一个任务.而负责执行任务则是cpu. 二.进程与程序的区别 程序:仅仅是一堆代 进程:是指打开程序运行的过程 三.并发与并行 并发与并行是指cpu运行多个 ...

  2. SQL查询系列1---

    1.查询关系为夫妻,年龄相加大于60的信息 表1 信息表 info id 编号   sex 性别 0-女,1-男 age 年龄   表2 关系表 rel id1 编号1 外键 id2 编号2 外键 r ...

  3. Jmeter之性能测试插件PerfMon Metrics Collector监听器，实时监听服务器资源（十四）

    Servers Performance Monitoring Introduction During a load test, it is important to know the health o ...

  4. datatables里面的search怎么去掉?

    今天使用datatables插件的时候,由于需求是把自带的search去掉,并且给输入框加上placeholder="Search",使其看起来更简洁美观,于是乎简单粗暴的把代码改 ...

  5. 安装PHP的mongodb驱动速记

    安装环境:Centos 6.5   PHP 5.3.27 这里PHP已经安装,安装路径为: /usr/local/php/ 下载安装文件: http://pan.baidu.com/s/1pJ0Spi ...

  6. ABP官方文档翻译 3.4 领域服务

    领域服务 介绍 IDomainService接口和DomainService类 示例 创建接口 服务实现 使用应用服务 一些探讨 为什么只有应用服务? 如何强制使用领域服务? 介绍 领域服务(或者在D ...

  7. Eclipse的调试功能的10个小窍门[转]

    原文链接:http://www.importnew.com/6164.html 你可能已经看过一些类似“关于调试的N件事”的文章了.但我想我每天大概在调试上会花掉1个小时,这是非常多的时间了.所以非常 ...

  8. BZOJ 4129: Haruna’s Breakfast [树上莫队 分块]

    传送门 题意: 单点修改,求一条链的mex 分块维护权值,$O(1)$修改$O(S)$求mex...... 带修改树上莫队 #include <iostream> #include < ...

  9. POJ置换群入门[3/3]

    POJ 3270 Cow Sorting 题意: 一个序列变为升序,操作为交换两个元素,代价为两元素之和,求最小代价 题解: 看了黑书... 首先循环因子分解 一个循环完成的最小代价要么是循环中最小元 ...

  10. Python tutorial阅读之Python基本运算与基本变量

    将 Python 当做计算器 除法运算 用/表示除法运算时,一般得到的是浮点数,如果我们需要得到整数,可以用运算符// 余数计算 % 幂乘方 系统内置变量_ 内置变量_,存储了最近的结果.如图 字符串 ...