CSS样式

控制高度和宽度

  1. width宽度
  2. height高度
  3.     块级标签能设置高度和宽度,而内联标签不能设置高度和宽度,内联标签的高度宽度由标签内部的内容来决定.
  4. 示例:
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <head>
  8.     <meta charset="utf-8">
  9.     <title>诗</title>
  10.     <style>
  11.         #d1 {
  12.             width: 100px;
  13.             height: 100px;
  14.             background-color: antiquewhite;
  15.         }
  17.         #d2 {
  18.             width: 100px;
  19.             height: 100px;
  20.             background-color: red;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  26. <div id="d1">div标签</div>
  27. <span id="d2">span标签</span>
  28. </body>
  29. </html>

字体属性

  1. 字体
  2. font-family: '楷体','黑体';  /* 字体,从左往右找浏览器能够支持的字体 */
  3. 字体大小
  4. font-size: 10px;           /* 设置字体大小,默认字体大小是16px */
  5. 字重
  6. font-weight:bold;       /*加粗*/
  8. 字体颜色
  9. /*color:red;*/
  10. /*color: #668B8B;  */
  11. /*color: rgb(255, 170, 205);*/

字重设置的值: font-weight用来设置字体的字重（粗细）。

值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值
以上示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>诗</title>
  6.     <style>
  7.         #d1 {
  8.             font-family: 楷体;    /*字体*/
  9.             font-size: 30px;    /*字体大小*/
  10.             font-weight: bold;  /*字重*/
  11.             color: red;     /*颜色*/
  12.             /*color: #ff0000;     !*十六进制表示*!*/
  13.             /*color: rgb(255,0,0);    !*范围0~255*!*/
  14.         }
  16.         #d2 {
  17.             font-family: 仿宋;    /*字体*/
  18.             font-size: 20px;    /*字体大小*/
  19.             font-weight: lighter;   /*字重*/
  20.             color: grey;    /*颜色*/
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  26. <div id="d1">少壮不努力</div>
  27. <span id="d2">老大徒伤悲</span>
  28. </body>
  29. </html>

文字属性

文字对齐(水平方向对齐:text-align)

text-align 属性规定元素中的文本的水平对齐方式。（letter-spacing）

值 描述
left 左边对齐 默认值
right 右对齐
center 居中对齐 
  1. text-align: center;
  2. text-align: right;
  3. text-align: left;

文字垂直对齐

  1. line-height:和css的height相同则会居中
以上示例:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>诗</title>
  6.     <style>
  7.         div p {
  8.             text-align: center;
  9.             line-height: 200px;
  10.             background-color: antiquewhite;
  11.             width: 200px;
  12.             height: 200px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17. <div>
  18.     <p>
  19.         努力
  20.     </p>
  21. </div>
  23. </body>
  24. </html>

文字装饰

text-decoration 属性用来给文字添加特殊效果。

值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。 
  1. <a href="">百度</a>
  2. 示例
  3. a{
  4.     text-decoration: none;
  5. }
首行缩进

text-indent文字缩进

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>诗</title>
  6.     <style>
  7.         p {
  8.             text-indent: 32px;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  14. <p>
  15.     黄色的树林里分出两条路，
  16.     可惜我不能同时去涉足，
  17.     我在那路口久久伫立，
  18.     我向着一条路极目望去，
  19.     直到它消失在丛林深处。
  20.     但我选了另外一条路，
  21.     它荒草萋萋，十分幽寂，
  22.     显得更诱人，更美丽；
  23.     虽然在这条小路上，
  24.     很少留下旅人的足迹。
  25.     那天清晨落叶满地，
  26.     两条路都未经脚印污染。
  27.     啊，留下一条路等改日再见！
  28.     但我知道路径延绵无尽头，
  29.     恐怕我难以再回返。
  30.     也许多少年后在某个地方，
  31.     我将轻声叹息将往事回顾：
  32.     一片树林里分出两条路——
  33.     而我选择了人迹更少的一条，
  34.     从此决定了我一生的道路。
  35. </p>
  36. </body>
  37. </html>

背景属性

  1. /*background-color: antiquewhite;*/     /* 设置背景颜色 */
  2. /*background-image: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2735289349,1811425433&fm=26&gp=0.jpg);*/       /* 背景图片,url属性值为图片路径 */
  3. /*background-repeat: no-repeat;*/       /* 图片是否平铺,默认是平铺的,占满整个标签 */
  4. /*background-position: 500px 310px;*/       /*图片位置*/
  6. background: antiquewhite url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2735289349,1811425433&fm=26&gp=0.jpg) no-repeat 500px 310px;         这一句是上面四行的缩写
缩写格式
  1. background: yellow url("meinv.jpg") no-repeat 100px 50px;
  2. 背景颜色 背景图片路径 是否平铺 图片位置

边框属性

  1. /*border-style: dotted;*/  样式
  2. /*border-color: red;*/   颜色
  3. /*border-width: 10px;*/  宽度
  4. 简写形式:
  5.     /*border: 10px solid yellow;*/
  7. 四个边框可以单独设置:
  8.     border-left:10px solid yellow ;
  9.     border-right:10px dashed red ;
  10. 设置圆角
  11.     border-radius: 5%;  /* 设置圆角 *
边框样式的值
值 描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。
示例:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>诗</title>
  6.     <style>
  7.         div{
  8.             /*border-style: solid;*/
  9.             /*border-color: red;*/
  10.             /*border-width: 10px;*/
  11.             /*border: 10px solid yellow;*/  /*是上面三行的缩写*/
  12.             border-left: 10px solid blue;
  13.             border-right: 20px dotted grey;
  14.             width: 200px;
  15.             height: 200px;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20. <div>
  22. </div>
  23. </body>
  24. </html>

display

值 意义
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。

示例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>诗</title>
  6.     <style>
  7.         div{
  8.             border: 1px solid red;
  9.             width: 200px;
  10.             height: 200px;
  11.             /*display: inline;*/
  12.             /*display: inline-block;*/
  13.             display: none;  /*隐藏标签*/
  14.         }
  15.         span{
  16.             border: 1px solid green;
  17.             width: 200px;
  18.             height: 200px;
  19.             display: block;
  20.             /*display: inline-block;*/
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25. <div>少壮不努力</div>
  26. <span>老大徒伤悲</span>
  27. </body>
  28. </html>
隐藏标签:
  1. /*display: none;*/   /* 隐藏标签,不占原来的位置 */
  2. visibility: hidden;  /* 原来的位置还占着 */

盒子模型

  1. content:内容  width和height 是内容的高度宽度
  2. padding:内边距(内填充) 内容和边框之间的距离
  3. border:边框
  4. margin:外边距 标签之间的距离,如果两个标签都设置了margin,选最大的值,作为双方之间的距离
  5. 占用空间大小:content+padding+border
示例:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>诗</title>
  6.     <style>
  7.         .c1{
  8.             width: 100px;
  9.             height: 100px;
  10.             border: 10px solid red;
  11.             /*padding: 20px 20px;*/
  12.             padding: 8px 6px 9px 2px;   /* 上右下左,内填充,内容和边框之间的距离 */
  13.             margin: 20px 10px;
  14.         }
  15.         .c2{
  16.             width: 100px;
  17.             height: 100px;
  18.             border: 10px solid green;
  19.             margin: 20px 10px;  /* 外边距,与其他标签的距离,如果旁边没有标签,按照父级标签的位置进行移动 */
  20.         }
  21.         .c3{
  22.             width: 100px;
  23.             height: 100px;
  24.             border: 10px solid blue;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <div class="c1">少壮不努力</div>
  30. <div class="c2">老大徒伤悲</div>
  31. <div class="c3">努力</div>
  32. </body>
  33. </html>
四个方向单独设置padding
  1. padding-left: 10px;
  2. padding-top: 8px;
  3. padding-right: 5px;
  4. padding-bottom: 5px;
四个方向单独设置margin
  1. margin-top: 10px;
  2. margin-left: 100px;
  3. margin-bottom: 50px;
  4. margin-right: 200px;

float浮动

一般用来进行页面布局
  1. 浮动会脱离正常文档流
  2. 会造成父级标签塌陷问题
解决浮动问题

clear属性规定元素的哪一侧不允许其他浮动元素。

值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。 
  1. clear: both;    /* clear清除浮动*/  left/right
  2. 方式:
  3.     1. 父级标签设置高度
  4.     2. 通过伪元素选择器来进行清除浮动
  5.         .clearfix:after{
  6.             content:'';
  7.             display: block;
  8.             clear: both;
  9.         }
解决示例:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>诗</title>
  6.     <style>
  7.         .c1 {
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: red;
  11.             float: left;
  12.         }
  14.         .c2 {
  15.             width: 100px;
  16.             height: 100px;
  17.             background-color: green;
  18.             float: right;
  19.         }
  21.         .c3 {
  22.             /*width: 100px;*/
  23.             height: 100px;
  24.             background-color: blue;
  25.             /*clear: both;    !* clear清除浮动 *!*/
  26.         }
  27.         .clearfix::after{
  28.             content: '';
  29.             display: block;
  30.             clear: both;;
  31.         }
  33.            /* 浮动,会造成父级标签塌陷问题 */
  34.             /* 解决父级标签塌陷问题方式1 */
  35.         /*.c{*/
  36.         /*    height: 100px;*/
  37.         /*}*/
  38.     </style>
  39. </head>
  40. <body>
  41. <div class="c clearfix">
  42.     <div class="c1">少壮不努力</div>
  43.     <div class="c2">老大徒伤悲</div>
  44. </div>
  45. <div class="c3">努力</div>
  46. </body>
  47. </html>

overflow溢出

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

示例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>诗</title>
  6.     <style>
  7.         div {
  8.             width: 200px;
  9.             height: 200px;
  10.             border: 1px solid red;
  11.             /*overflow: hidden;*/
  12.             /*overflow: scroll;*/
  13.             overflow: auto;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18. <div>
  19.     <P>黄色的树林里分出两条路，
  20.         可惜我不能同时去涉足，
  21.         我在那路口久久伫立，
  22.         我向着一条路极目望去，
  23.         直到它消失在丛林深处。
  24.         但我选了另外一条路，
  25.         它荒草萋萋，十分幽寂，
  26.         显得更诱人，更美丽；
  27.         虽然在这条小路上，
  28.         很少留下旅人的足迹。
  29.         那天清晨落叶满地，
  30.         两条路都未经脚印污染。
  31.         啊，留下一条路等改日再见！
  32.         但我知道路径延绵无尽头，
  33.         恐怕我难以再回返。
  34.         也许多少年后在某个地方，
  35.         我将轻声叹息将往事回顾：
  36.         一片树林里分出两条路——
  37.         而我选择了人迹更少的一条，
  38.         从此决定了我一生的道路。
  39.     </P>
  40. </div>
  41. </body>
  42. </html>
overflow与border-radius的应用:圆形头像
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>小诗</title>
  6.     <style>
  7.         .c1{
  8.             width: 110px;
  9.             height: 110px;
  10.             border-radius: 50%;
  11.             border: 1px solid antiquewhite;
  12.             overflow: hidden;
  13.         }
  14.         div img{
  15.             width: 100%;
  16.         }
  17.     </style>
  18.     <link rel="stylesheet" href="css1.css">
  19. </head>
  20. <body>
  22. <div class="c1">
  23.     <img src="1.png" alt="">
  24. </div>
  26. </body>
  27. </html>

定位

  1. static定位(默认,无定位)
  3. 相对定位
  4.     position: relative;     /* 相对于自己原来的位置进行移动,原来的空间还占着*/
  6. 绝对定位
  7.     position:absolute;      /* 不占用自己原来的位置,移动的时候如果父级标签或祖先标签设置了相对定位,会以父级标签或祖先标签为参照物移动,如果父级标签或祖先标签没有设置相对定位,则按照整个文档进行移动*/
  9. 固定定位
  10.     position:fixed;
  11.     按照浏览器窗口的位置进行移动
回到顶部示例:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>小诗</title>
  6.     <style>
  7.         .c1,.c3{
  8.             background-color: red;
  9.             height: 500px;
  10.             width: 600px;
  11.         }
  12.         .c2{
  13.             background-color: grey;
  14.             height: 500px;
  15.             width: 600px;
  16.         }
  17.         #back_top{
  18.             height: 40px;
  19.             width: 80px;
  20.             position: fixed;
  21.             right: 40px;
  22.             bottom: 40px;
  23.             background-color: antiquewhite;
  24.         }
  25.         #back_top{
  26.             text-align: center;
  27.             line-height: 40px;
  28.         }
  29.         #back_top a{
  30.             color: grey;
  31.             text-decoration: none;
  32.         }
  33.     </style>
  34.     <link rel="stylesheet" href="css1.css">
  35. </head>
  36. <body>
  37. <a id="top">这是顶部位置</a>
  38. <div class="c1"></div>
  39. <div class="c2"></div>
  40. <div class="c3"></div>
  41. <div id="back_top">
  42.     <a href="#top">回到顶部</a>
  43. </div>
  44. </body>
  45. </html>

z-index设置层级

以模态对话框来介绍

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>小诗</title>
  6.     <style>
  7.         .shadow{
  8.             background-color: rgba(0,0,0,0.3);
  9.             position: fixed;
  10.             top: 0;
  11.             right: 0;
  12.             bottom: 0;
  13.             left: 0;
  14.             z-index: 90;
  15.         }
  16.         .mode{
  17.             width: 400px;
  18.             height: 400px;
  19.             background-color: #fff;
  20.             z-index: 100;
  21.             position: fixed;
  22.             top: 50%;
  23.             left: 50%;
  24.             margin-left: -200px;
  25.             margin-top: -200px;
  26.         }
  27.         .c1{
  28.             width: 200px;
  29.             height: 200px;
  30.             margin: 150px auto;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35. <h1>努力</h1>
  36. <div>少壮不努力,老大徒伤悲</div>
  37. <div class="mode">
  38.     <div class="c1">
  39.         <div>
  40.             <label>
  41.                 用户名: <input type="text">
  42.             </label>
  43.         </div>
  44.         <div>
  45.             <label>
  46.                 密码: <input type="password">
  47.             </label>
  48.         </div>
  49.         <input type="submit" style="margin-top: 10px">
  50.     </div>
  51. </div>
  52. <div class="shadow"></div>
  53. </body>
  54. </html>

z-index注意点

  1. 1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
  2. 2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index
  3. 3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
  4. 4.从父现象：父亲怂了，儿子再牛逼也没用

opacity透明度和rgba透明度的区别

  1. opactiy是整个标签的透明度
  2. rgba是单独给某个属性设置透明度

示例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>小诗</title>
  6.     <style>
  7.         .c1{
  8.             background-color: rgba(255,0,0,0.5);    /* 只有颜色变了 */
  9.         }
  10.         .c2{
  11.             opacity: 0.3;       /* 字体和背景都变了 */
  12.             background-color: red;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17. <div class="c1">div1</div>
  18. <div class="c2">div2</div>
  19. </body>
  20. </html>

百万年薪python之路 -- 前端CSS样式的更多相关文章

  1. 百万年薪python之路 -- 前端CSS基础介绍

    一. CSS介绍 CSS定义 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 语法结构 div{ color: green ...

  2. python之路--前端CSS

    一.CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义了如何显示HTML元素,给HTML设置样式,让他更加美观. 当浏览器读到这个样式表, 他就会按照这个样式来对文档进行 ...

  3. 百万年薪python之路 -- JS的BOM与DOM对象

    BOM对象 location对象 location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载 ...

  4. 百万年薪python之路 -- 面向对象之继承

    面向对象之继承 1.什么是面向对象的继承 继承(英语:inheritance)是面向对象软件技术当中的一个概念. 通俗易懂的理解是:子承父业,合法继承家产 专业的理解是:子类可以完全使用父类的方法和属 ...

  5. 百万年薪python之路 -- 数据库初始

    一. 数据库初始 1. 为什么要有数据库? ​ 先来一个场景: ​ 假设现在你已经是某大型互联网公司的高级程序员,让你写一个火车票购票系统,来hold住十一期间全国的购票需求,你怎么写? 由于在同一时 ...

  6. 百万年薪python之路 -- 并发编程之 协程

    协程 一. 协程的引入 本节的主题是基于单线程来实现并发,即只用一个主线程(很明显可利用的cpu只有一个)情况下实现并发,为此我们需要先回顾下并发的本质:切换+保存状态 cpu正在运行一个任务,会在两 ...

  7. 百万年薪python之路 -- 请求跨域和CORS协议详解

    楔子 什么是同源策略 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.当一个浏览器的两个tab ...

  8. 百万年薪python之路 -- JS基础介绍及数据类型

    JS代码的引入 方式1: <script> alert('兽人永不为奴!') </script> 方式2:外部文件引入 src属性值为js文件路径 <script src ...

  9. 百万年薪python之路 -- HTML基础

    一. Web标准 web标准: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web标准规范的分类:结构标准.表现标准.行为标准. 结构:html.表示:c ...

随机推荐

  1. 解决微信小程序开发中wxss中不能用本地图片

    微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方 ...

  2. elasticsearch深度分页问题

    elasticsearch专栏:https://www.cnblogs.com/hello-shf/category/1550315.html 一.深度分页方式from + size es 默认采用的 ...

  3. supervisor 启动ElasticSearch报错问题

    在/etc/elasticsearch/conf.d/新建一个es的配置文件,elasticsearch.conf,这里碰到一个小坑,网上很多文章介绍的是elasticsearch.ini,启动发现找 ...

  4. 读《深入理解Elasticsearch》点滴-聚合-top_hits

    以下是官网手册(部分)(v5.1) 直接直接看官网手册 https://www.elastic.co/guide/en/elasticsearch/reference/5.1/search-aggre ...

  5. Linux 部署vsftp服务及详解

    一.FTP服务概述: FTP服务器(File Transfer Protocol Server)是在互联网上提供文件存储和访问服务的计算机,它们依照FTP协议提供服务. FTP(File Transf ...

  6. 【Spring Boot源码分析】@EnableAutoConfiguration注解（一）@AutoConfigurationImportSelector注解的处理

    Java及Spring Boot新手,首次尝试源码分析,欢迎指正! 一.概述 @EnableAutoConfiguration注解是Spring Boot中配置自动装载的总开关.本文将从@Enable ...

  7. linux分析工具之vmstat详解

    一.概述 vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.首先我们查看下帮助.如下图所 ...

  8. 去掉文件 BOM 头

    什么是 BOM? BOM 全称是 Byte Order Mark,意思是字节顺序标记.常用来当作标示文件是以 UTF-8.UTF-16 或者 UTF-32 编码的标记. 去除 BOM 头方法 vim ...

  9. 一步步剖析spring bean生命周期

    关于spring bean的生命周期,是深入学习spring的基础,也是难点,本篇文章将采用代码+图文结论的方式来阐述spring bean的生命周期,方便大家学习交流.  一  项目结构及源码 1. ...

  10. Rust入坑指南：核心概念

    如果说前面的坑我们一直在用小铲子挖的话,那么今天的坑就是用挖掘机挖的. 今天要介绍的是Rust的一个核心概念:Ownership.全文将分为什么是Ownership以及Ownership的传递类型两部 ...