zoukankan      html  css  js  c++  java
  • CSS 简介和代码风格

    CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.

    有时我们也会称之为 CSS 样式表或级联样式表。
    CSS 是也是一种标记语言
    CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、
    边距等)以及版面的布局和外观显示样式。
    CSS 让我们的网页更加丰富多彩,布局更加灵活自如。简单理解:CSS 可以美化 HTML , 让 HTML 更漂亮,
    让页面布局更简单。
    CSS 最大价值: 由 HTML 专注去做结构呈现,样式交给 CSS,即 结构 ( HTML ) 与样式( CSS ) 相分离。

    CSS 语法规范

    使用 HTML 时,需要遵从一定的规范,CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰,首先需要了解
    CSS 样式规则。
    CSS 规则由两个主要的部分构成:选择器以及一条或多条声明。

     选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式
     属性和属性值以“键值对”的形式出现
     属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
     属性和属性值之间用英文“:”分开
     多个“键值对”之间用英文“;”进行区分

    所有的样式,都包含在 <style> 标签内,表示是样式表。<style> 一般写到 </head> 上方。

    <head>
     <style>
     h4 {
     color: blue;
     font-size: 100px;
     }
     </style>
    </head>
    

    CSS 代码风格

    代码书写风格不是强制规范,而是符合实际开发书写方式

    1. 样式格式书写
    2. 样式大小写风格
    3. 样式空格风格

    1. 样式格式书写

    ① 紧凑格式

    h3 { color: deeppink;font-size: 20px;}
    

    ② 展开格式

    h3 {
     color: pink;
     font-size: 20px; 
    }
    

    强烈推荐第二种格式, 因为更直观。

    2. 样式大小写

    h3 {
     color: pink;
    }
    H3 {
     COLOR: PINK; 
    }
    

    强烈推荐样式选择器,属性名,属性值关键字全部使用小写字母,特殊情况除外。
    3. 空格规范

    h3 {
     color: pink; 
    }
    

    ① 属性值前面,冒号后面,保留一个空格
    ② 选择器(标签)和大括号中间保留空格

    CSS 属性书写顺序

    建议遵循以下顺序:

    1. 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)
    2. 自身属性:width / height / margin / padding / border / background
    3. 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
    4. 其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
    .myclass {
     display: block;
     position: relative;
     float: left;
      100px;
     height: 100px;
     margin: 0 10px;
     padding: 20px 0;
     font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
     color: #333;
     background: rgba(0,0,0,.5);
     border-radius: 10px;
    }
    
  • 相关阅读:
    Native RabbitMQ Direct Exchange
    RabbitMQ系列文章导读
    AbstractQueuedSynchronizer
    CountDownLatch和CyclicBarrier
    显示锁Lock
    《SeleniumBasic 3.141.0.0
    《SeleniumBasic 3.141.0.0
    《SeleniumBasic 3.141.0.0
    《SeleniumBasic 3.141.0.0
    《SeleniumBasic 3.141.0.0
  • 原文地址:https://www.cnblogs.com/qingheshiguang/p/14919712.html
Copyright © 2011-2022 走看看