编写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

扫一扫关注,学习编程:

【轻松前端之旅】CSS入门的更多相关文章

  1. 【轻松前端之旅】​CSS选择器中的空格与尖括号有何区别?

    CSS选择器中的空格与尖括号有何区别? 例子1: .a .b { margin: 0; } 空格隔开a和b,选择所有后代元素. 例子2: .a>.b { margin: 0; } 尖括号隔开a和 ...

  2. 【轻松前端之旅】CSS盒子模型

    盒子模型,也叫框模型,在CSS里是很重要的概念. 每个元素都可以看做一个盒子.盒子包含四个部分:外边距(margin).边框(border).内边距(padding).元素内容(element con ...

  3. 【轻松前端之旅】<!DOCTYPE>标签

    前端学习,先学习HTML,CSS,Javascript HTML - HyperText Markup Language HTML-超文本标记语言,提供了一种标记网页内容的方法. 浏览器怎么知道如何显 ...

  4. 前端开发HTML&CSS入门——具体是做什么的

    软件开发,一提起来感觉这个感觉这个词范围很大很广,说起来也很笼统.不知所云,开发的到底是什么?或者说开发的具体内容是什么?以前我们讲软件开发主要是分前端和后端,那前端和后端又是什么那?你可以这么通俗的 ...

  5. 【轻松前端之旅】HTML的块元素、行内元素和空元素

    块(block)元素 显示成一块,前后有换行.块元素常用于web页面的主要构造模块.例如:<div>,<p>,<h1>~<h6>,<blockqu ...

  6. 【轻松前端之旅】元素,标记,属性,<html>标签

    HTML文档是由HTML元素定义的. HTML元素(element)指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 有些元素会使用简写记法,如<img src=' ...

  7. 前端开发之CSS入门篇

    一.CSS介绍和语法 二.CSS引入方式 三.基本选择器 四.高级选择器 五.伪类选择器 六.伪元素选择器 1️⃣  CSS介绍和语法 1. CSS的介绍 (1)为什么需要CSS? 使用css的目的就 ...

  8. 前端学习笔记--CSS入门

    1.css概述: 2.css语法: 3.css添加方法: 用单独的文件存储css样式的优点: 优先级: h3得到的样式是内嵌样式覆盖了外部样式. 4.css选择器 标签选择器: 类别选择器: ID选择 ...

  9. 前端开发HTML&css入门——伪类选择器和一些特殊的选择器

    伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...

随机推荐

  1. __slots__用法

    class Test(object): __slots__ = ("name","age") t = Test() t.name = "老王" ...

  2. php 7 event 安装

    有效安排I/O,时间和信号的扩展 使用可用于特定平台的最佳I/O通知机制的事件,是PHP基础设施的libevent端口. 下载地址:http://pecl.php.net/package/event ...

  3. Cookie深度解析

    最近在公司做了Web端单点登录(SSO)功能,基于Cookie实现,做完之后感觉有必要总结一下,本文着重讲解Cookie,下文会说明单点登录的实现方案. Cookie简介 众所周知,Web协议(也就是 ...

  4. [转]检测到有潜在危险的 Request.Form 值

    <system.web> <httpRuntime targetFramework="4.0" requestValidationMode="2.0&q ...

  5. Ajax请求的几个小练习

    Ajax请求的几个小练习 准备工作 路由中做了分发: re_path('^app01/',include('app01.url')) app01中url.py文件的内容: from django.ur ...

  6. [图文教程]VS2017搭建opencv & C++ 开发环境

    首先从官网下载OpenCV最新版本 截至我写这文章,4.0已经发布预览版了,不过在这是没有的,只能用3.4.2: https://opencv.org/releases.html 一:安装 安装过程不 ...

  7. tomcat advanced (RUNNING)

    1. 1. tomcat

  8. java反编译工具cfr

    http://www.benf.org/other/cfr/ 下载反编译工具 @echo off SET home=%cd% rem 指定存放jar包的目录 SET jar_dir=%home%\ja ...

  9. java中Class.getMethod方法

    Method Class.getMethod(String name, Class<?>... parameterTypes)的作用是获得对象所声明的公开方法 该方法的第一个参数name是 ...

  10. Python函数学习

    def func(x, y): print(x) print(y) func(x=1,2) #报错,关键参数一定不能放在位置参数前面 func(1,y=2) #可以正常运行 #参数组,适用于实参个数不 ...