【轻松前端之旅】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
扫一扫关注,学习编程:
【轻松前端之旅】CSS入门的更多相关文章
- 【轻松前端之旅】CSS选择器中的空格与尖括号有何区别?
CSS选择器中的空格与尖括号有何区别? 例子1: .a .b { margin: 0; } 空格隔开a和b,选择所有后代元素. 例子2: .a>.b { margin: 0; } 尖括号隔开a和 ...
- 【轻松前端之旅】CSS盒子模型
盒子模型,也叫框模型,在CSS里是很重要的概念. 每个元素都可以看做一个盒子.盒子包含四个部分:外边距(margin).边框(border).内边距(padding).元素内容(element con ...
- 【轻松前端之旅】<!DOCTYPE>标签
前端学习,先学习HTML,CSS,Javascript HTML - HyperText Markup Language HTML-超文本标记语言,提供了一种标记网页内容的方法. 浏览器怎么知道如何显 ...
- 前端开发HTML&CSS入门——具体是做什么的
软件开发,一提起来感觉这个感觉这个词范围很大很广,说起来也很笼统.不知所云,开发的到底是什么?或者说开发的具体内容是什么?以前我们讲软件开发主要是分前端和后端,那前端和后端又是什么那?你可以这么通俗的 ...
- 【轻松前端之旅】HTML的块元素、行内元素和空元素
块(block)元素 显示成一块,前后有换行.块元素常用于web页面的主要构造模块.例如:<div>,<p>,<h1>~<h6>,<blockqu ...
- 【轻松前端之旅】元素,标记,属性,<html>标签
HTML文档是由HTML元素定义的. HTML元素(element)指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 有些元素会使用简写记法,如<img src=' ...
- 前端开发之CSS入门篇
一.CSS介绍和语法 二.CSS引入方式 三.基本选择器 四.高级选择器 五.伪类选择器 六.伪元素选择器 1️⃣ CSS介绍和语法 1. CSS的介绍 (1)为什么需要CSS? 使用css的目的就 ...
- 前端学习笔记--CSS入门
1.css概述: 2.css语法: 3.css添加方法: 用单独的文件存储css样式的优点: 优先级: h3得到的样式是内嵌样式覆盖了外部样式. 4.css选择器 标签选择器: 类别选择器: ID选择 ...
- 前端开发HTML&css入门——伪类选择器和一些特殊的选择器
伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...
随机推荐
- __slots__用法
class Test(object): __slots__ = ("name","age") t = Test() t.name = "老王" ...
- php 7 event 安装
有效安排I/O,时间和信号的扩展 使用可用于特定平台的最佳I/O通知机制的事件,是PHP基础设施的libevent端口. 下载地址:http://pecl.php.net/package/event ...
- Cookie深度解析
最近在公司做了Web端单点登录(SSO)功能,基于Cookie实现,做完之后感觉有必要总结一下,本文着重讲解Cookie,下文会说明单点登录的实现方案. Cookie简介 众所周知,Web协议(也就是 ...
- [转]检测到有潜在危险的 Request.Form 值
<system.web> <httpRuntime targetFramework="4.0" requestValidationMode="2.0&q ...
- Ajax请求的几个小练习
Ajax请求的几个小练习 准备工作 路由中做了分发: re_path('^app01/',include('app01.url')) app01中url.py文件的内容: from django.ur ...
- [图文教程]VS2017搭建opencv & C++ 开发环境
首先从官网下载OpenCV最新版本 截至我写这文章,4.0已经发布预览版了,不过在这是没有的,只能用3.4.2: https://opencv.org/releases.html 一:安装 安装过程不 ...
- tomcat advanced (RUNNING)
1. 1. tomcat
- java反编译工具cfr
http://www.benf.org/other/cfr/ 下载反编译工具 @echo off SET home=%cd% rem 指定存放jar包的目录 SET jar_dir=%home%\ja ...
- java中Class.getMethod方法
Method Class.getMethod(String name, Class<?>... parameterTypes)的作用是获得对象所声明的公开方法 该方法的第一个参数name是 ...
- Python函数学习
def func(x, y): print(x) print(y) func(x=1,2) #报错,关键参数一定不能放在位置参数前面 func(1,y=2) #可以正常运行 #参数组,适用于实参个数不 ...