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字符串问题

    相关知识点: 字符串在Python内部的表示是unicode编码,因此,在做编码转换时,通常需要以unicode作为中间编码,即先将其他编码的字符串解码(decode)成unicode,再从unico ...

  2. DVWA安装问题（phpStudy）

    安装过程出现的问题: 1.PHP function allow_url_include disabled 注意DVWA的版本    PHP version: 5.4.45 打开/phpStudy/ph ...

  3. Electron应用使用electron-builder配合electron-updater实现自动更新(windows + mac)

    发客户端一定要做的就是自动更新模块,否则每次版本升级都是一个头疼的事.下面是Electron应用使用electron-builder配合electron-updater实现自动更新的解决方案. 1.安 ...

  4. encodeURI()和encodeURIComponent()

    encodeURI() 返回值 URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换. 说明 该方法会替换所有的字符,但不包括以下字符,即使它们具有适当的UTF-8转义序列: 保留 ...

  5. virtualbox创建虚拟机及增加硬盘记录

    创建虚拟机 jken01VBoxManage createvm --name "jken01" --basefolder /data/virtualDir/jken01 --reg ...

  6. 洛谷 [P2766] 最长不下降子序列问题

    啊啊啊,再把MAXN和MAXM搞反我就退役 层次图求不相交路径数 第一问简单DP 第二问想办法把每一个不上升子序列转化成DAG上的一条路径,就转换成了求不相交路径数 因为每一个数只能用一次,所以要拆点 ...

  7. POJ 2007 Scrambled Polygon [凸包 极角排序]

    Scrambled Polygon Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 8636   Accepted: 4105 ...

  8. 《CSS核心技术详解》

    前言 看似简单的CSS,却暗藏玄机,那是我们摸爬滚打好长时间后悟出的真理. 在很长的一段时间里,我并没有重视CSS,觉得CSS很简单,无非就是一些属性:后来才发现自己小看了CSS,对CSS的了解实在是 ...

  9. LeetCode - 620. Not Boring Movies

    X city opened a new cinema, many people would like to go to this cinema. The cinema also gives out a ...

  10. PyCharm安装及使用

    搭建环境 1.win10_X64,其他Win版本也可以. 2.PyCharm版本:Professional-2016.2.3. 搭建准备 1.到PyCharm官网下载PyCharm安装包.   Dow ...