CSS介绍、选择器

css(层叠样式表  Cascading Style Sheet)-------表现层

目前最新版本CSS3.0,能够做到表现与内容分离的一种计算机语言,在css中主要学习选择器和属性

在学习之前先看一下css的书写位置和需要注意的地方

书写位置

1、外联(外部)样式   <link href="css文件路径" rel="stylesheet" />

2、嵌入(内页)样式   <style></style>

3、内部(行内)样式   style=""

书写格式

选择器{属性:属性值}

注意:在CSS中多个属性用分号隔开

注释方法为/*注释内容*/

选择器

基础选择器

*选择器    表示获取html文档中所有的标签,一般用在统配(全局)样式

html选择器(标签选择器)   标签名{}

类选择器   .类名{}

ID选择器   #ID值{}

关系选择器

E F(后代选择器)  E元素下边的F元素

E>F (子集选择器)   E元素的子集元素F

E+F (紧邻选择器) 紧邻E元素之后的兄弟元素F

E~F (兄弟元素选择器) 选择E元素的兄弟元素F

属性选择器

E[attr]   具有attr属性的元素E

E[attr="value"] 具有attr属性的并且其属性值等于value的元素E

E[arrr^="value"] 具有attr属性的并且其属性值以value开始的元素E

E[attr$="value"]  具有attr属性的并且其属性值以value结尾的元素E

E[attr*="value"]   具有attr属性的并且其属性中包含value的E元素

伪类选择器

:active   当元素在被激活的时候时的样式

:link    a标签未被访问前的样式

:visited  a标签已被访问过得样式

:hover    鼠标滑过的样式

伪对象选择器

E::before{content:"123";}   在E元素之前常与content属性配合使用

E::after{content:"abc";}    在E元素之后常与content属性配合使用

E::first-letter{color:red;}  E元素内容的第一个字符

E::first-line{color:red;}    E元素内容的第一行

时间: 2024-10-08 09:41:32

CSS介绍、选择器的相关文章

25 May 18 HTML-Tabel标签 CSS介绍 CSS选择器

25 May 18 一.table标签(标记一段数据为表格) #1.作用:表格标签是一种数据的展现形式,当数据量非常大的时候,使用表格的形式来展示被认为是最清晰的 #2.格式 <table> <tr> <td></td> </tr> </table> tr代表表格的一行数据 td表一行中的一个单元格 #3.注意点: 表格标签有一个边框属性,这个属性决定了边框的宽度.默认情况下这个属性的值为0,所以看不到边框 #4表格属性 a.宽度和高

浅谈css中选择器的优先级

学习web前端,主要学习的课程html5,css,js,ajax等一些基本的编程语言,当然这是一门高深的学问.而这篇文章主要是谈谈我对css中选择器优先级的一些简单的理解与看法,希望对您的学习提供一些帮助.好了,废话不多说了,让我们开始进入主题吧. css中文解释是“层叠式样式表”,在这里我要说一下,所谓层叠样式表的意思就是说我们可以给一个标签或者文本内容同时添加许多种样式,简单点说就是可以通过多种方式去支配同一个东西.那么就会出现这样的问题了——选择优先级的问题.就是谁的属性能起到控制的最终目

CSS系列(8) CSS后代选择器和子选择器详解

一.CSS后代选择器详解 1,  生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> <p>这个p标签是div的后代</p> <div> 后代选择器就是用来选择一个标签的后代的: 两个选择器中间添加一个[空格]就构成了后代选择器,空格后面的那个是后代. 例如: div p { color : red; } 它会选择一堆的p标签,只要这个p标签是嵌套在某个div标签内

css 元素选择器实例

一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式.本文章向码农介绍css 标签/元素选择器以及其实例,需要的码农可以参考一下. [标签选择器] 一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式,(在大环境中你可能出于不同的位置,但是不管怎么样,你总是穿着同一套衣服,这件衣服就是由标签选择器事先给你限定好的,不管走到哪里都是这身衣服)比如,在style.css文件中对p标签样式的声明如下: p{ fon

Css3之高级-1 Css复杂选择器(兄弟选择器 、属性选择器、伪类选择器、伪元素选择器)

一.兄弟选择器 相邻兄弟选择器 - 相邻兄弟选择器匹配指定元素的相邻兄弟元素 - 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 - 使用加号(+)作为结合符 通用兄弟选择器 - 通用兄弟选择器匹配某元素后面的所有兄弟元素 - 使用符号(~)作为结合符,即 element1~element2 - 两种元素必须拥有相同的父元素,但是element2不必直接紧随element1 二.属性选择器 属性选择器 - 属性选择器能够将元素附带的属性用于选择器中,从而对带

Css3之基础-2 Css 基础选择器

一.Css 基础选择器 通用选择器 通用选择器 - 通用选择器,显示为一个星号(*) - 可以与任何元素匹配 - 常用于设置一些默认样式,比如设置整个文档的文本的默认字体和大小 元素选择器 - html文档的元素就是选择器 - 比如<p>.<h1>等 类选择器 - 语法为: .className {color:read;} - 类名称不能以数字开头 - 所有能够附带class属性的元素都可以使用此样式声明 - 将元素的class属性的值设置为样式类名 - 可以将多个类选择器应用于同

CSS介绍

第1章 CSS介绍 1.1 什么是CSS CSS全称Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的. 样式指的是HTML标签的显示效果,比如换行.宽高.颜色等等 层叠属于CSS的三大特性之一,我们将在后续内容中介绍 表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里 1.2 为什么要用CSS 在没有CSS之前,我们想要修改HTML标签的样式则需要为每个HTML标签单独定义样式属性,如下 <!DOCTYPE html> <html&

7-[CSS]-css介绍,引入方式

1.CSS介绍:层叠样式表(Cascading Style Sheets) 我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要逐个修改,费心费力.是时候做出改变了,所以CSS就出现了. CSS的出现解决了下面两个问题: 将HTML页面的内容与样式分离. 提高web开发的工作效率. 什

前端学习之路-CSS介绍,Html介绍,JavaScript介绍

CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 <p style="background-color: #FFF000"> p标签 </p> 在head中加入style标签 <head> <style type="text/css"> p { color: #FFF000

web前端入门到实战:Html介绍,CSS介绍,JavaScript介绍

标题图 CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 p标签作者: 在head中加入style标签作者: p{color:#FFF000;} 链接方式 总结CSS 选择器名称 { 属性名:属性值: --. } 属性与属性之间用 分号 隔开 属性与属性值用 冒号 连接 选择器 1.class选择器 2.id选择器 .class# id Html h