zoukankan      html  css  js  c++  java
  • CSS基础语法


    CSS规则由选择器和声明组成

    选择器是要改变样式的HTML元素,也可以是表示多个元素的id或class;

    声明是要改变的属性和属性值,以冒号隔开;声明之间用分号隔开

    h1 {color:red; font-size:14px;} /*改变h1元素的样式*/
    .div {color:red; font-size:14px;} /*改变class为div的所有元素的样式*/
     

    CSS插入HTML
    当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种:

    1、外部样式表

    最常用的插入方法,将所有的样式存放到一个后缀为“.css”的独立文件中。这样既易于修改,与内容分离又保证了HTML代码的简洁,更重要的是,独立出来的样式可以应用于多个页面。

    插入方法和插入JS类似,href的值为URL,规定css文件所在的位置。

    *<link>在HTML中没有结束标签,结尾有"/",且只能存在于head部分,没有出现次数限制

    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    </head>
     

    2、内部样式表

    当样式较少,只应用于单个页面时,内部样式表是合适的选择。

    使用<style>标签在文档头部定义内部样式表

    <head>
    <style type="text/css">
    hr {color: sienna;}
    p {margin-left: 20px;}
    body {background-image: url("images/back40.gif");}
    </style>
    </head>
     

    3、内联样式

    内联样式将样式和内容合为一体,这种方法会使文档代码变得复杂,除非样式只在需要的元素上应用一次,否则不要轻易尝试。

    直接在元素标签内使用style属性,用""把所有声明括起,声明间以分号隔开

    <p style="color: sienna; margin-left: 20px">
    This is a paragraph
    </p>
     

    4、多重样式

    层叠次序

    ①内联样式(在 HTML 元素内部)

    ②内部样式表(位于 <head> 标签内部)

    ③外部样式表

    ④浏览器缺省设置

  • 相关阅读:
    vue-cli的npm run build的常见问题
    es6 Symbol
    es6 对象的扩展
    es7 函数绑定
    es6 箭头函数
    学习weex遇见非常奇怪的问题
    微信
    java面试题
    PHP面试题
    Android
  • 原文地址:https://www.cnblogs.com/10ve/p/10582137.html
Copyright © 2011-2022 走看看