• 【轻松前端之旅】CSS入门


    编写css,很自然的思路:

    1、给哪些元素添加样式呢?选择器技术就解决这个问题。

    2、添加哪些样式?这就要了解css样式属性及它的值对应的显示规则了。

    因此,学习css首先要学的就是选择器,至于样式属性需要靠实践的积累了。

    CSS选择器,用于选择需要添加样式的元素。

    选择器就是一个遍历树的算法。HTML元素以树结构构成HTML文档,选择器遍历树找到符合条件的元素。

    选择器的种类(可以理解为按什么条件遍历):

    1、元素选择器

    如:p {color:red;}

    这个样式将应用到页面里的所有p元素。

    2、类选择器

    给html元素添加class属性后,使用“.”定义。

    如,选择所有class为class1的元素

    .class1 {color:red;}

    再如,选择class为class1的所有p元素。

    p.class1 {color:red;}

    省略去元素名就可以了。

    3、id选择器

    给html元素添加id属性后,以"#"定义。

    如:#id1 {color:red;}

    给一个html元素设置多个class样式,很简单用空格隔开就好:

    如:<p class="class1 class2 class3...">

    给多个html元素编写统一样式,也很简单,用逗号隔开就好:

    如:p,h1,h2,.class1{ color:red;}

    css属性的继承与覆盖继承:

    子元素会继承父元素的属性,但如果子元素指定了与父元素相同的属性,就会覆盖继承。不过不是所有属性都可以继承的,如字体、字体颜色等属性是可以继承的,边框属性却不可以继承。

    样式冲突

    当元素应用了几组样式规则时,可能会有些规则重复定义了,这时候浏览器如何选择样式?这就要设计样式的优先级了,有权重计算方法,待研究。

    一般规则: id选择器>class选择器>元素选择器。

    然后是按加载顺序,后加载的优先级高。

    还有指定了!important的优先级最高。

    验证css:可以通过这工具来验证:http://jigsaw.w3.org/css-validator/

    css选择器用法,来自http://www.w3school.com.cn/cssref/css_selectors.asp

    扫一扫关注,学习编程:

  • 相关阅读:
    c#实现MD5加密
    AJAX学习笔记 一:简单的XMLHTTPRequest示例和asp.net异步更新。
    客户端JS验证fileupload控件,设置只允许特定的文件类型。
    三层架构下的用户登录检测。
    常用用户注册页面客户端验证脚本。
    Android Debug Bridge 技术实现原理
    Android反编译与防止反编译
    android用sharepreference保存输入框中的内容
    android include 控件详解
    android程序排序算法实现
  • 原文地址:https://www.cnblogs.com/xjxz/p/7580749.html
Copyright © 2020-2023  润新知