zoukankan      html  css  js  c++  java
  • css基础学习01

    1. 什么是css

    层叠样式表(cascading style sheets)

    css是一种用来美化网页的手段。

    2. css的书写位置

    1. 内嵌式:书写在html的head中

    <style>

      css代码

    </style>

    特点:结构和样式有一定的分离

       可维护性较高

       只可以影响当前页面

    2.外联式:书写在.css文件中,被html调用

    <link rel=”stylesheet” href=”css文件的路径” >

    特点:结构和样式完全分离

       可维护性最高

       可以影响所有引用它的页面

    3.行内式:内联式,书写在标签中

    <div style="200px;height:200px;background-color:red;"></div>

    特点:结构和样式混合在一起

       可维护性最差

       只能影响当前标签

    3. css的语法结构

    选择器名称  {

      属性名:属性值;

      ...

    }

    4.css基础选择器

    1.标签选择器

    语法结构:

    标签名 {

      属性名:属性值;

      ....

    }

    选择原理:根据标签名选中并修饰对应的标签。

    选择范围:当前页面上所有的同名标签。

    2.类选择器

    语法结构:

    .+目标标签的class值 { 属性:属性值; ... }

    选择原理:根据标签的class的值找到并修饰这个标签。

    特点:类名可以重复,class选择器可以修饰多个标签。

       一个标签可以有多个类名,一个标签可以被多个class选择器修饰。

    选择范围:拥有相同类名的标签。

    3.ID选择器

    语法结构:

    #+目标元素的id属性的值 {属性:属性值;...}

    注意点:id好比是标签的身份证,不允许使用同样的id值

    缺点:可重用性低

    选择范围:id为选择器名称的标签。

    4.通配符选择器

    语法结构:

    * {属性:属性值;...}

    选择原理:选择所有的标签进行样式控制

    缺点:选择器效率低

    5.css复合选择器

    1.标签指定式选择器(交集选择器)

    语法结构:

    标签选择器+class或者id选择器 {属性:属性值;...}

    选择原理:同时符合要求的标签选择器名和class或者id选择器名的标签。

    2.后代选择器

    语法结构:

    选择器1 + 空格 + 选择器2 + 空格 + ...{属性:值;}

    选择原理:先符合选择器1,并在选择器1下找到符合选择器2的后代元素

    3.并集选择器

    语法结构:

    选择器1+逗号+选择器2+逗号+选择器3..... { 属性:值;}

    选择原理:只要满足任意一个选择器的选择条件,就可以被选中。

  • 相关阅读:
    hdoj-1004-Let the Balloon Rise(水题)
    hdoj-1827-Summer Holiday(scc+缩点)
    poj--3624--Charm Bracelet(动态规划 水题)
    HDU
    HDU
    HDU
    HDU
    【POJ1654】Area【叉积】
    【POJ1654】Area【叉积】
    【SSLOJ1715】计算面积【叉积】
  • 原文地址:https://www.cnblogs.com/chendu/p/5708984.html
Copyright © 2011-2022 走看看