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 Core】MVC中自定义视图的查找位置

    .NET Core 的内容处处可见,刷爆全球各大社区,所以,老周相信各位大伙伴已经看得不少了,故而,老周不考虑一个个知识点地去写,那样会成为年度最大的屁话,何况官方文档也很详尽.老周主要扯一下大伙伴们 ...

  2. Spring学习之装配Bean

    通过注解配置的bean,默认是单例 @Autowired private CodeTypeService codeTypeService; 测试:在Controller层调用Service层对象Cod ...

  3. BZOJ 4569: [Scoi2016]萌萌哒 [并查集 倍增]

    传送门 题意:长为$n \le 10^5$的数字,给出$m \le 10^5$个限制$[l1,r1]\ [l2,r2]$两个子串完全相等,求方案数 把所有要求相等的位置连起来,不就是$9*10^{连通 ...

  4. Jquery里面种的 JSON.parse() 与JSON.stringify() 的区别

    JSON.parse()与JSON.stringify()的区别   JSON.parse()[从一个字符串中解析出json对象] Demo: //定义一个字符串 var data='{"N ...

  5. iis发布网站问题-由于权限不足而无法读取配置文件，无法访问请求的页面

    错误一: HTTP Error 500.19 - Internal Server Error 配置错误: 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的 (o ...

  6. 【ASP.NET Core】处理异常（上篇）

    依照老周的良好作风,开始之前先说点题外话. 前面的博文中,老周介绍过自定义 MVC 视图的搜索路径,即向 ViewLocationFormats 列表添加相应的内容,其实,对 Razor Page 模 ...

  7. Redis 学习(三) —— 事务、消息发布订阅

    一.Redis事务 Redis 提供的事务机制与传统的数据库事务有些不同,传统数据库事务必须维护以下特性:原子性(Atomicity), 一致性(Consistency),隔离性(Isolation) ...

  8. JSON工具类

    import java.sql.Timestamp; import java.util.Collection; import java.util.Date; import org.soul.util. ...

  9. Dockerfile 中的 CMD 与 ENTRYPOINT

    CMD 和 ENTRYPOINT 指令都是用来指定容器启动时运行的命令.单从功能上来看,这两个命令几乎是重复的.单独使用其中的一个就可以实现绝大多数的用例.但是既然 doker 同时提供了它们,为了在 ...

  10. 2017年StackOverflow上最好的20个Python问题

    1.Python的 .. (点号 点号) 是什么语法? 答案地址:https://stackoverflow.com/questions/43487811/what-is-python-dot-dot ...