CSS学习(1)选择器

使用CSS



1,CSS是层叠样式表(Cascading Style Sheet),由选择器和声明块两部分构成。如下前部分h1是选择器,花括号包围的块是声明块。

h1 {
    color: red;
}

2,CSS使用主要分为外部样式表,嵌入样式表,和内联样式表。

/*外部样式表*/
<link rel="stylesheet" href="base.css">
/*嵌入样式表*/
<style>
    h1 {
        color: red;
    }
</style>
/*内联样式表*/
<h1 style="color: red">内联样式表</h1>

3,选择器用来确定样式表要应用到哪些元素中。可用的选择器类别有五种:元素名称、类别、伪类、属性、ID

(1)在优先级上,ID的优先级是最高的,元素名称最低,类别和属性是一样的。

(2)选择器可以混合使用。混合后的选择器优先级从右边往左开始计算。比如 h1.very要比 .very h1的优先级高,所以同时满足两者的元素会优先使用h1.very的样式。如果优先级相同则使用后出现的样式

(3)混合使用选择器:

  a,元素名称:与同类选择器组合,以空格隔开表示父子元素关系;以逗号隔开表示等同关系

  b,类别用点号+类名

  c,伪类使用冒号+伪类名

  d,属性使用[name="value"]属性值不填时[name]表示不限制属性值,可用的匹配模式有 =, ~=, |=, *=, ^=, $=

  e,ID用#id

h1,h2 { } /*h1,h2元素*/
h1 h2 { } /*h1的所有h2子元素*/
h1 > h2 { } /*h1的直接h2子元素*/
h1 + h2 { } /*h1后面的相邻的同父元素的h2元素 */
h1 ~ h2 { } /*h1后面的同父元素h2元素*/
h1.very h2[lang|="zh"]:first-letter { }
时间: 2024-10-20 12:12:08

CSS学习(1)选择器的相关文章

css学习之——选择器

css3在原来的原则器基础上增加了很多类型的选择器,下面总结一下css3提供的选择器,当做一个复习. 一.基础选择器 1.* :通配选择器,选择HTML文档中的所有元素. 2.#idValue :id选择器,选择id为idValue的元素. 3..classValue :类选择器,选择类为classValue的元素 4.E: 标签选择器,选择所有E元素 5.E,#idValue,.classValue :群组表达式,选择所有的E元素和id为idValue的元素,类为classValue的元素.

CSS学习_属性选择器

CSS选择器参考 [attribute]--选取带有指定属性的元素: [attribute=value]--选取带有指定属性和值的元素: [attribute~=value]--选取属性值中包含指定词汇的元素: [attribute|=value]--选取带有以指定值开头的属性值的元素,该值必须是整个单词: [attribute^=value]--匹配属性值以指定值开头的每个的元素: [attribute$=value]--匹配属性值以指定值结尾的每个的元素: [attribute*=value

CSS学习(八)——定义选择器

ID定义型与class定义型排版样式 (1) 对于ID定义型,每个ID在页面中只能用一次.尽管一个ID在页面内多次使用也能实现效果,但是这样写不规范.如果同一个样式页面内多次使用,应该用class定义型. (2) ID可与标记定义型结合使用,例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio

08.css学习-伪类选择器

<html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">/* 伪类选择器:伪类选择器就是对元素处于某种状态下进行样式的(a表示对a标签作用). 注意: 1. a:hover 必须被置于 a:link 和 a:visited 之后 2. a:active 必须被置于 a:hover 之后 */ a:link{color:#F00} /* 没有被点

HTML学习笔记 CSS学习选择器 第五节 (原创)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="tzy.css" type="text/css"> <style type="text/

HTML学习笔记 CSS学习选择器案例 第五节 (原创) 参考使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="tzy.css" type="text/css"> <style type="tex

css学习_写法规范、选择器

1.css(层叠样式表)样式主要目的(让页面更好看些) css尽量不要写内联样式,保证结构和样式分离原则: html专门负责结构,css专门负责样式. 2.css写法规范 选择器  { 属性 :值 : } 内联样式  写在标签里   style=“”属性:值“” 内部样式  写在head标签里的style标签里 外部样式   通过链接导入样式表  link 3.font-size(字号大小) 4.浏览器默认字体font-family 微软雅黑 ,字体大小一般默认为16px 一般不想写中文是可以用

CSS学习(2)Id和Class选择器

id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义. 以下的样式规则应用于元素属性 id="para1": #para1 { text-align:center; color:red; } ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用. class 选择器 class 选择器用于描述一组元素的样式,clas

css学习感言

在培训学校学习了一个多月了,最近主要讲的是css,准确的说老师上课讲css用了8天的时间,讲课的速度飞快,可能是对于我这种零基础的学生来说吧,感觉学起来很吃力,不过在这个过程中也学到了许多知识,这里主要介绍一下css中选择器权重的问题,css中选择器分为三类1.元素选择器2.类选择器3.id选择器4.通配符 ,这里主要介绍前三类. 元素选择器:例如table,input,button等他们分别表示一大类,称之为元素.它的权重是最小的,相当于日常生活中重量单位的一克.它是对一大类比如table,i

(2)css的复合选择器与特性

css的复合选择器与特性 在本篇学习资料中,将深入了解css的相关概念,上一篇介绍的3种基本选择器的基础上,学习3种由基本选择器复合构成的选择器,然后再介绍css的两个重要的特性. 1.复合选择器 复合选择器就是两个或多个基本选择器,通过不同的方式连接成的选择器. 复合选择器的三种类型:交集选择器.并集选择器.后代选择器. (1)交集选择器 “交集”复合选择器由两个选择器直接连接构成:其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器:这两个选择器之间不能有空格. 例如:下图声明了