前端学习笔记3：CSS简介及CSS选择器

来源：互联网发布：泼墨软件编辑：程序博客网时间：2024/06/05 23:52

1. CSS简介

全称为“层叠样式表Cascading Style Sheets”,用于定义HTML内容在浏览器中显示的样式

2. CSS代码语法

由选择符和声明组成，声明放在{}中，声明又由属性和值组成。

span{font-size:12px;color:red;font-weight:bold;}

3. CSS注释

/*注释代码*/

4. CSS样式代码插入的形式

4.1 内联式CSS样式：把CSS代码直接放在现有的HTML标签中

<p style="color: red;font-size:12px">这里的文字是红色的</p>

4.2 嵌入式CSS样式：把CSS样式代码写在<style type:"text/css"></style>标签之间，一般嵌入式CSS样式放在<head></head>之间

<html><head><meta http-equiv="Content-Type"；content="text/heml;charset=utf-8"><title>嵌入式CSS样式</title><style type="text/css">span{color: red;}</style></head><body><p>我是一只小小鸟，<span>飞也飞不高</span></p></body></html>

4.3 外部式CSS样式：把CSS代码放在一个单独的外部文件中（.css扩展名），在<head>内使用<link>标签链接到HTML文件中。

<link rel="stylesheet" type="text/css" href="base.css">

4.4 三种方法的优先级

内联式>嵌入式>外部式（就近原则）

5. CSS选择器

5.1 选择器

每条CSS样式声明都由两部分组成，形式如下：

选择器{

样式；

}

5.2 标签选择器

标签选择器其实就是html代码中的标签，如<p>、<body>、<h1>等。

<html><head><meta http-equiv="Content-Type"；content="text/heml;charset=utf-8"><title>嵌入式CSS样式</title><style type="text/css">p{color: red;}</style></head><body><p>我是一只小小鸟，飞也飞不高</p></body></html>

5.3 类选择器

.类选器名称{CSS样式代码；}

类选器名称可以任意，使用合适的标签吧修饰的内容标记起来，如下的<span>

<html><head><meta http-equiv="Content-Type"；content="text/heml;charset=utf-8"><title>嵌入式CSS样式</title><style type="text/css">.stress{color: red;}</style></head><body><p>我是一只小小鸟，<span class="stress">飞也飞不高</span></p></body></html><link rel="stylesheet" type="text/css" href="base.css">

5.4 ID选择器

<html><head><meta http-equiv="Content-Type"；content="text/heml;charset=utf-8"><title>嵌入式CSS样式</title><style type="text/css">#stress{color: red;}</style></head><body><p>我是一只小小鸟，<span id="stress">飞也飞不高</span></p></body></html><link rel="stylesheet" type="text/css" href="base.css">

5.5 类和ID选择器的区别

ID选择器只能在文档中使用一次
可以使用类选择器词列表的方式为同一个元素同时设置多个样式

<html><head><meta http-equiv="Content-Type"；content="text/heml;charset=utf-8"><title>嵌入式CSS样式</title><style type="text/css">.stress{color: red;}.bigsize{font-size: 25px;}</style></head><body><p>我是一只小小鸟，<span class="stress bigsize">飞也飞不高</span></p></body></html><link rel="stylesheet" type="text/css" href="base.css">

5.6 子选择器（>）：用于选择指定标签元素的第一代子元素

下例中“水果”两个字为红色

<html><head><meta http-equiv="Content-Type"；content="text/heml;charset=utf-8"><title>嵌入式CSS样式</title><style type="text/css">.stress>li{color: red;}</style></head><body><ul class="stress">食物</ul><li>水果<li>苹果</li><li>香蕉</li><li>梨</li></li></body></html>

5.7 包含（后代）选择器（空格）：用于选择指定标签元素下的后辈元素

注意包含（后代）选择器与子选择器的区别：子选择器总用于元素的第一代后代，包含（后代）选择器作用于元素的所有后代

<html><head><meta http-equiv="Content-Type"；content="text/heml;charset=utf-8"><title>嵌入式CSS样式</title><style type="text/css">.stress span{color: red;}</style></head><body><p class="stress">我是一只小小鸟，<span>怎么飞也飞不高</span></p></body></html>

5.8 通用选择器（*）：匹配html中所有标签元素

<html><head><meta http-equiv="Content-Type"；content="text/heml;charset=utf-8"><title>嵌入式CSS样式</title><style type="text/css">*{color: red;}</style></head><body><h1>啦啦啦</h1><p>我是一只小小鸟，怎么飞也飞不高</p></body></html>

5.9 伪类选择器：它允许给html不存在的标签（标签的某种状态）设置样式，比如给html中一个标签元素的鼠标滑过的状态设置样式

<html><head><meta http-equiv="Content-Type"；content="text/heml;charset=utf-8"><title>嵌入式CSS样式</title><style type="text/css">a:hover{color: red;}</style></head><body><h1>啦啦啦</h1><p>我是一只小小鸟，怎么飞也飞不高<a href="http://www.baidu.com">百度</a></p></body></html>

5.10 分组选择符(，）：为html中多个标签元素设置同一个样式

<html><head><meta http-equiv="Content-Type"；content="text/heml;charset=utf-8"><title>嵌入式CSS样式</title><style type="text/css">h1,span{color: red;}</style></head><body><h1>啦啦啦</h1><p>我是一只小小鸟，<span>怎么飞也飞不高</span></p></body></html>

阅读全文

0 0