zoukankan      html  css  js  c++  java
  • 关于CSS的一些基础内容

    最近用到了CSS,刚好学学。CSS(Cascading Style Sheet)中文名层叠样式表,用于为html文档添加样式控制,也是一种计算机语言。

    一、CSS语法
    a)CSS规则由选择器和声明组成,构造为selector{declaration1;declaration2},多个声明之间用分号隔开。declaration又包含属性property和值value两部分。结构为property:value。

    b) 不同的property的value有不太能够的写法,比如color:#ff000;color:rgb(255,255,255);12px;98%;font-family:"Calibr"等等。
    c) CSS中使用空格不会影响工作效果,而且CSS对大小写不敏感,但涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

    d) 可以对选择器分组,然后使用相同的声明,比如
    table,div,h1{
      color:red;
    }

    二、选择器
    常用的选择器有派生选择器、ID选择器、类选择器、属性选择器等。
    a) 派生选择器
    能够依据元素的上下文关系来定义样式,所以也叫上下文选择器。比如要让li列表中的strong元素变为斜体字:

    li strong {
        font-style: italic;
        font-weight: normal;
      }
     
    <ol>
    <li><strong>我是斜体字</strong></li>
    <li>我是正常的字体。</li>
    </ol>


    让h2中的strong颜色为blue

    h2 {
         color: red;
         }

    h2 strong {
         color: blue;
         }

        
    <h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

    h2 strong会覆盖h2的样式定义

    b)ID选择器
    用于为标有特定ID的html元素指定样式。

    #red {color:red;}
    <p id="red">这个段落是红色。</p>

    ID属性在html中不能重复,否则只有最后渲染的那个生效。

    ID选择器也用于建立派生选择器,扩展派生选择器的使用场合。

    c) 类选择器
    用点号开头,且类名的第一个元素不能是数字,基本使用为:
    .center {text-align: center}
    <h1 class="center">
    类选择器可作用于所有标记的元素。
    类选择器也可以可派生选择器配合使用:
    .fancy td {
        color: orange;
        }
    这样写时,类名为fancy的更大的元素内部的表格单元都会显示橙色文字。
    td.fancy {
        color: orange;
        }
    而这样时,所有类名为fancy的单元格都将是橙色文字。
    d)属性选择器
    用于对带有指定属性的HTML元素设置样式。比如为带有title属性的所有元素设置样式:

    <h2 title="Hello world">Hello world</h2>
    <a title="hello" href="http://hello.com">hello</a>

    [title]
    {
    color:red;
    }

    还有属性和值选择器,比如
    [title=hello]选择title=hello的元素
    [title~=hello]选择title包含hello的元素
    [title|=hello]选择title以hello开头的元素

    e)伪类
    伪类用于为选择器添加特殊的效果,比如要控制超链接的状态:
    a:link {color: #FF0000}/* 未访问的链接 */
    a:visited {color: #00FF00}/* 已访问的链接 */
    a:hover {color: #FF00FF}/* 鼠标移动到链接上 */
    a:active {color: #0000FF}/* 选定的链接 */

    伪类与CSS还可以配合使用:

    a.red : visited {color: #FF0000}
    <a class="red" href="css_syntax.asp">css</a>

     

    三、框模型(Box Model)
    a)CSS中的元素采用框模型来定义内容(element)、内边距(padding)、外边距(margin)、边框(border)等。

     

    b) padding属性控制元素边框与内容之间的空白区域,margin则设置元素边框外侧的空白区域。
    如果直接写padding:10px或margin:10px,则四条边框都会生效,也可以使用*-top*-right*-bottom*-left来分别设置,简写时为{paddingmargin:1px,1px,1px,1px},这是按照上右下左的顺时针顺序设置了对应的边距。

     

    c)CSS的长度单位分为相对长度单位和绝对长度单位,相对长度单位有em(字体高度)ex(字体x的高度)px(像素)\%(百分比),绝对长度单位有in(英寸)cmmmpt(point1点=72分之1英寸)pc(Picas,1px=12点)。为边距使用%时,是相对父元素的width计算的。

  • 相关阅读:
    (2).net体系
    (1)php开篇常识
    java基础知识-xx
    java基础知识-字符串与数组
    java基础知识-流程控制
    小明的喷漆计划
    加分二叉树
    括号序列
    P1045
    胖男孩
  • 原文地址:https://www.cnblogs.com/zhixin9001/p/7612946.html
Copyright © 2011-2022 走看看