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. Ubuntu中使用dnw工具：没有找到/dev/secbulk0

    Ubuntu中使用dnw动机: 一. 之前没有用ubuntu中的dnw,想试试. 二. 因为换了win10系统,怕搞不定win10中dnw的驱动,想着在ubuntu中不用禁用数字签名啥的比较省心.(事 ...

  2. awk 实用技巧

    awk 用法:awk ' pattern {action} ' 变量名 含义ARGC 命令行变元个数ARGV 命令行变元数组FILENAME 当前输入文件名FNR 当前文件中的记录号FS 输入域分隔符 ...

  3. python-day2数据类型

    内容介绍 数据类型 字符编码 文件处理 1.什么是数据? x=10 , 10是我们要存储的数据. 2.为何数据要分不同的类型 数据是用来表示状态的,不同的状态就应该用不同的类型的数据去表示 3.数据类 ...

  4. 2018-01-28-M个本地工作点代码同步到N个GIT远端

    layout: post title: 2018-01-28-M个本地工作点代码同步到N个GIT远端 key: 20180128 tags: IT GIT modify_date: 2018-01-2 ...

  5. 05_Python Format Operation

    Python格式化输出 print('name: %s,version: %s,code: %d' %('Python',3.6,3)) print('name: {name},version: {v ...

  6. Springboot security cas整合方案-原理篇

    前言:网络中关于Spring security整合cas的方案有很多例,对于Springboot security整合cas方案则比较少,且有些仿制下来运行也有些错误,所以博主在此篇详细的分析cas原 ...

  7. dubbo 线程池

    在dubbo调用过程中被调用方有两个线程池:io线程池,业务线程池. 这也是dubbo调优的点. 配置信息: <dubbo:protocol name="dubbo" dis ...

  8. C# 使用反射获取界面并传参

    // 通过反射创建类库中的实例 try { // 通过反射,获取模块 Assembly assembly = Assembly.LoadFrom(AppDomain.CurrentDomain.Bas ...

  9. Azure ARM (21) Azure订阅的两种管理模式

    <Windows Azure Platform 系列文章目录> 熟悉Azure平台的读者都知道,Microsoft Azure服务管理,分为三个层次: 1.企业服务合同 (Enterpri ...

  10. Java的一些良好习惯及细节------持续更新中...

    1.在做条件判断时,不要将变量放在判断符的左边,这样做可以防止出现空指针异常,以字符串比较为例: String name = "Tom"; //这种方式不推荐,如果变量name为空 ...