CSS(1)---css语法、css选择器

CSS(1)---css语法、css选择器

一、CSS语法

1、CSS语法

CSS 规则由两个主要的部分构成:选择器以及一条或多条声明

属性 是您希望设置的 样式属性。每个属性有一个属性值。属性和属性值被冒号分开。

示例

 <!--  这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素 -->
     h1 {color:red; font-size:14px;}
  <!-- 在这里,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。 -->

二、CSS三种引入方式

CSS三种引入方式有:行内样式内部样式表外部样式表

1、行内样式

它是通过标签的 style属性 来设置元素的样式,

基本语法示例:

<!--使用行内样式引入CSS-->
 <body>
     <p style="color:blue; font-size:40px">欢迎访问雨点的博客。</p>
 </body>

建议 实际在写页面时不提倡使用,在测试的时候可以使用。

2、内部样式表

style标签 中书写CSS代码。style标签写在head标签中。

其基本语法示例:

<head>
  <!--使用内部样式表引入CSS-->
  <style type="text/css">
    div{
        background: green;
    }
  </style>
</head>

3、外部样式表

CSS代码保存在扩展名为.css的样式表中。有两种方式:链接式导入式

基本语法示例:

<head>
  <!--链接式:推荐使用-->
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <!--导入式-->
  <style type="text/css">
    @import url("css/style.css");
  </style>
</head>

4、三者比较

三、CSS基础选择器

基础选择器可以分为: 标签选择器类选择器id选择器通配符选择器

1、标签选择器

标签选择器(元素选择器)是指用 HTML标签名称 作为选择器,按标签名称分类,为页面中同一类标签指定统一的CSS样式。基本语法示例:

<!-- 示例 这里h1就是标签-->
h1 {color:red; font-size:14px;}

标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。

2、类选择器

类选择器使用 .(英文点号)进行标识,后面紧跟 类名

基本语法示例

 <head>
    <style type="text/css">
        .center {text-align: center}
   </style>
</head> 

注意:类名的第一个字符不能使用数字!

3、 id选择器

id选择器使用 # 进行标识,后面紧跟id名,其基本语法示例:

 <head>
    <style type="text/css">
        #red {color:red;}
        #green {color:green;}
   </style>
</head>

id选择器和类选择器区别

类选择器: 好比人的名字,是可以多次重复使用的。

id选择器: 好比人的身份证号码,是唯一的不能重复。

4、通配符选择器

通配符 选择器用 * 号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。

例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

四、CSS复合选择器

复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

复合选择器有:交集选择器、并集选择器后代选择器子元素选择器相邻兄弟选择器伪类选择器

1、交集选择器

交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如p.className。

基本语法

示例

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        div.red {  /*交集选择器  既要满足是 div 标签 又要满足class叫 red*/
            color: red;
        }
    </style>
</head>
<body>
    <div>交集选择器</div>
    <div class="red">交集选择器</div>  <!-- 只有这个会变红 -->
    <p class="red">交集选择器</p>
</body>
</html>

2、并集选择器

并集选择器,只要满足一个就可以。比如 .className, h1 , #id {color: #F00;} 表示 .className 和 h1 和 #id 这三个选择器都会执行颜色为红色。 通常用于集体声明。

示例

<!DOCTYPE html>
<html>
<head>
    <title>并集选择器</title>
    <style>
    /*1. 只要满足其中一个就会变红*/
    div, p, span {   /*并集选择器  用逗号隔开 */
        color: red;
    }
    </style>
</head>
<body>
    <div>并集选择器</div>
    <p>并集选择器</p>
    <span>并集选择器</span>
    <h1>并集选择器</h1>  <!-- 只有这一个不会变红 -->
</body>
</html>

3、后代选择器

后代选择器又称为包含选择器,一般标签里面又会包含标签,那么内层标签就为外层标签的后代。

示例

<!DOCTYPE html>
<html>
<head>
    <title>后代选择器</title>
    <style>
    div p  {   /* 后代选择器  p 一定是 div 的孩子 */
        color: red;
    }
    </style>
</head>
<body>
    <div> 后代选择器 </div>
    <div>
        <p>后代选择器</p>   <!-- 只有它变红 -->
    </div>
</body>
</html>

4、子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接,注意,符号左右两侧各保留一个空格。

后代选择器跟子元素选择器的区别

后代可以是 亲儿子 、亲孙子 、亲重孙子之类的,而子代只是亲儿子。所以后代选择器的范围更广些。

示例

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
    ul li > a {  /*这里表示 ul的后代中的li的亲儿子才会有效  */
            color:red;
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">一级菜单</a>    <!-- 只有这个是li的亲儿子,所以只有它会变红 -->
            <div>
                <a href="#">二级菜单</a>  <!-- 这三个只是li的后代但并不是亲儿子,所以不会变红 -->
                <a href="#">二级菜单</a>
                <a href="#">二级菜单</a>
            </div>
        </li>
    </ul>
</body>
</html>

5、相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器

例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

h1 + p {margin-top:50px;}

这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。

6、 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。

为了和我们刚才学的类选择器相区别, 类选择器是一个点 比如 .className {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}。

示例

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
    a:link {  /* 未访问过的连接状态*/
        color: #3c3c3c;
        font-size: 25px;
        text-decoration: none;  /*取消下划线*/
        font-weight: 700;
    }
    a:visited {  /*这个链接我们已经点过的样子  已访问过链接*/
        color: orange;
    }
    a:hover {  /*鼠标经过连接时候的样子*/
        color: #f10215;
    }
    a:active {  /*鼠标按下时候的样子*/
        color: green;
    }

    </style>
</head>
<body>
    <a href="http://www.oujiong.com">点击</a>
</body>
</html>

参考

有关CSS选择器上面也只是讲了一部分,更多的可以看w3school官方文档。当你需要怎么样的选择器到这里查找就可以。

1、w3school-CSS 教程

2、CSS 选择器参考手册

你如果愿意有所作为,就必须有始有终。(3)

原文地址:https://www.cnblogs.com/qdhxhz/p/11768248.html

时间: 2024-11-04 10:46:00

CSS(1)---css语法、css选择器的相关文章

CSS的基本语法

W3School离线手册(2017.03.11版)下载:https://pan.baidu.com/s/1c6cUPE7jC45mmwMfM6598A CSS(层叠样式表) 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎

CSS基础,认识css样式

1.认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于 定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{ font-size:12px; color:red; font-weight:bold; } 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字 有着统一的字体.字号或者颜色等. 2.CSS代码的语法 css 样式由选择符和声明组成,而声明又由属性和值组成, 选择符: 又称选择器

css基础语法和选择器的使用

css语法 selector{ property:value } 例:h1{color:red; font-size:14px} 属性大于1个之后,属性之间用分号隔开 如果值大于1个单词,则需要加上引号 p{font-family:"sans serif";} 选择器分组: h1,h2,h3,h4,h5,h6{color:red;} 继承: body{ color:green; } css-派生选择器 通过依据元素在其位置的上下文关系来定义样式 css-id选择器 id选择器可以为标有

CSS基本语法和选择器

CSS是指层叠样式表(cascading style sheets),样式定义如何显示HTML元素,是真正能够做到网页表现和内容分类的一种语言. [1]CSS基本语法 [2]CSS两种结合方式 [3]几种选择器 基本语法 基本语法也就两种,在head中使用选择器选择,然后在body中使用,如下中的样式属性键:样式属性值1 样式属性值2...是多个属性值的连用. <!DOCTYPE html> <html> <head> <title>02-结合方式2.htm

我的笔记之——CSS的定义、基本语法及选择器的使用

一.CSS的定义 1.什么是css Cascading Style Sheet 层叠样式表 级联样式表 样式表 2.作用: 实现了内容和表现的分离 提高了代码的可重用性和可维护性 二.css样式表的使用方式 使用方式共分三种,使用任何一种都可以更改页面的样式. 1.内联方式 内联样式: 将css样式定义在HTML的标签中 特点:不通用,只能定义某一标签的单独样式. 2.内部样式表 将一系列样式定义在HTML的<head>中 特点:当前网页任何一个标签都可以使用,体现出可重用性. 3.外部样式表

css的after伪对象选择器简单介绍

css的after伪对象选择器简单介绍:本章节将会介绍一下after伪对象选择器的用法,希望能够给需要的朋友带来一定的帮助.此选择器前面要加两个点:或者四个点::,两个点的时候是css2中的写法,在css3中规定是四个点,这是为了和伪类选择器进行区别,当然当前两个点也是适用的.语法结构: E:after{ Rules } E::after{ Rules } 此选择器能够设置元素内部结尾的一些结构内容 通常和content属性一起使用,关于content可以参阅CSS的content属性一章节. 

HTML——CSS的基础语法1

页面中所有CSS代码,需要写入到<style></style>标签中. style标签的type属性应该选择text/css,但是type属性可以省略. 1.CSS常用选择器 CSS修改页面中的所有标签,必须借助选择器选中.选择器中可以写多对CSS属性,用{}包裹:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1:属性值1; 属性2:属性值2; } 1-1.标签选择器 写法:HTML标签名{}作用:可以选中页面中,所有与选择器同名的HTML标签. li{

web(六)css的基本语法、取值与单位

css语法包含如下部分: 选择器:用于选择需要添加样式的元素. 属性(property):样式的属性名称,例如color代表颜色. 取值与单位:属性对应的值以及单位. 语法规则:css的某些固定语法. 注释:用户对css的程序描述,不执行. css的基本语法规则 忽略大小写(但在定义类选择器时识别大小写),建议使用小写. 多重声明:使用多个属性以及取值同时渲染一组标签. 1 p { 2 text-align: center; 3 color: black; 4 font-family: aria

第二部分----CSS的基础语法

PART-1 CSS的基础常识 一.什么是CSS? W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说是CSS.CSS全称Cascading Style Sheets,中文名为层叠样式表,是一种用来表现HTML等文件样式的计算机语言.  二.CSS应用的三种方式: 1. 行内样式表 行内样式表将CSS样式与HTML代码完全杂糅在一起,不符合W3C关于内容与表现分离的的基本规则,且不利于网站的维护.但是行内样式

css基础知识学习之选择器

类选择语法如下: .类选择器名称{ 属性名:属性值;}多个属性名:属性值以分号隔开 导入到html文件的cc文件,方法如下1:在<head>..</head>之间使用<line href='path'type='text/css' rel="stylesheet"/>导入之后使用方法如下:<span class=名称>例子:css文件 .str1{ font-size: 20px; background-color: salmon; fo