前端之CSS语法及选择器
一、css语法:
css由两大部分组成:选择符和声明,声明由属性和属性值两部分组成;
选择符{属性:属性值;属性:属性值;}
注: a) 属性和属性值之间用冒号连接;
b)每条声明结束要加分号;
二、css选择器:
1.id选择器:
语法: <标记 id="id名"></标记>
#id名{属性:属性值;}
注:id名是唯一的,不允许出现同名的id!id名不允许使用词列表的方式!
2.class选择器:
语法:<标记 class="class名"></标记>
.class名{属性:属性值;}
注:可以有相同的类名, 也可以使用类名词列表的方式(当所有样式都与其他元素相同,只有某一个css样式与其他元素不同)
3.元素选择符(类型选择符,标签选择器)
语法:标记名称{属性:属性值;}
注:a)如果想改变某个元素的默认样式时,可以使用类型选择符;
b) 当统一文档某个元素的显示效果时,可以使用类型选择符;
4.群组选择器:
语法:选择符1,选择符2,选择符3{属性:属性值;}
注:给多个元素设置同一个样式时,使用群组选择器
5.后代选择器(包含选择器):
语法:选择符1 选择符2 选择符3{属性:属性值;}
注:选择符1,选择符2及选择符3一定是包含与被包含的关系
6.通配符(通用选择器):
语法: *{属性:属性值;}
常用写法: *{margin:0; padding:0;}
注:*匹配html下所有的标签元素
7.伪类选择器:
语法: 选择符:hover{属性:属性值;}
超链接的四种状态:
a:link 链接没有被访问过时的状态
a:visited 链接访问过后的状态
a:hover 鼠标滑过时的状态
a:active 鼠标按下时的状态
三、css权重问题
1.第一等 内联样式 style="" 权重:1000
2.第二等 id选择器 权重:100
3.第三等 class选择器,伪类选择器,属性选择器 权重:10
4.第四等 类型选择器,伪元素选择器 权重:1
注:后代选择器 权重:各个选择器权重之和
群组选择器 权重:各个选择器自身的权重
前端之CSS语法及选择器的更多相关文章
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
- 前端之css样式(选择器)。。。
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- 前端之css样式(选择器)
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- 前端之css语法3
一 float属性 1 基本的浮动规则: block元素和inline元素在文档流中的排列方式. block元素通常被现实独立的一块,独占一行.多个block元素会各自新起一行,默认block预算宽度 ...
- 前端学习 -- Css -- 兄弟元素选择器
为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. < ...
- 前端开发-CSS语法标准
一.命名规则说明: 1.命名规则说明: 所有的命名最好都小写 属性的值一定要用双引号("")括起来,且一定要有值如class="nav",id="na ...
- CSS语法、选择器、继承、层叠
行内样式(内联样式) <h1 style="color:red;font-size:20px;">css行内样式</h1> 内部样式表(嵌入样式) < ...
- 前端之CSS:CSS选择器
前端之css样式(选择器)... 一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器, ...
随机推荐
- mysql导出 数据库字典
USE information_schema; --切记这里不能忘掉 SELECT T.TABLE_SCHEMA AS '数据库名称', T.TABLE_NAME AS '表名', T.TABLE_T ...
- PDB文件说明
文/玄魂 .PDB文件,全称为“程序数据库”文件.我们使用它(更确切的说是看到它被应用)大多数场景是调试应用程序.目前我们对.PDB文件的普遍认知是它存储了被编译文件的调试信息,作为符号文件存在.那么 ...
- 孙鑫C++教学视频
视频百度云:https://pan.baidu.com/s/1jKf6GoY 在线观看:http://list.youku.com/albumlist/show?id=3567028&asce ...
- 在Entity Framework 中实现继承关系映射到数据库表
继承关系映射到数据库表中有多种方式: 第一种:TPH(table-per-hiaerachy) 每一层次一张表 (只有一张表) 仅使用名为父类的类型名的一张表,它包含了各个子类的所有属性信息,使用区分 ...
- HDU 1230饭前开胃菜
题意不讲了.. 没思路,上去就是干.... 两个所谓要加的数直接存到数组,开一个标记的数组,然后直接加,乱搞一波,就好了. 细心一点. #include<iostream> #includ ...
- POJ2446【建图建图】
题意: 给你一个n*n的矩阵,然后再给你几个坑,然后问你能否被1*2的长方形给覆盖: -弱知道了是二分匹配的做法,但是弱还是不会转化,又是在建图上GG了 分析: 从国际象棋的那个黑白色理解,这是一张二 ...
- python __builtins__ enumerate类 (21)
21.'enumerate', 用于将一个可遍历的数据对象(如列表.元组或字符串)组合为一个索引序列,同时列出数据和数据下标,一般用在 for 循环当中. class enumerate(object ...
- Linux 命令行光标操作
转自: https://blog.csdn.net/leo_618/article/details/53003111 看一个真正的专家操作命令行绝对是一种很好的体验-光标在单词之间来回穿梭,命令行不同 ...
- hdu1875 畅通工程再续 暴力+基础最小生成树
#include<cstdio> #include<cmath> #include<algorithm> using namespace std; ; ; ; in ...
- 跟我一起玩Win32开发(8):绘图(A)
从本篇开始,我就不吹牛皮,那就吹吹兔皮吧.说说与绘图有关的东东. 要进行绘制,首先要得到一个DC,啥是DC呢?按字面翻译叫设备上下文,也可以翻译为设备描述表,它主要指API为我们封装了一些与显示设备相 ...