CSS基本知识和选择器
一、CSS基本知识
- 内联式css样式,直接写在现有的HTML标签中
内联式
css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:- <p style="color:red">这里文字是红色。</p>
嵌入式css样式,写在当前的文件中
- 嵌入式css样式,就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色:
- <style type="text/css">
- span{
- color:red;
- }
- </style>
- <style type="text/css">
- 嵌入式css样式,就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色:
外部式css样式,写在单独的一个文件中
- 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“
.css
”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:<link href="base.css" rel="stylesheet" type="text/css" />
- 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“
三种方法的优先级
- 记住他们的优先级:
内联式 > 嵌入式 > 外部式
- 记住他们的优先级:
二、CSS选择器
- 每一条css样式声明(定义)由两部分组成,形式如下:
- 选择器{
- 样式;
- }
- 选择器{
标签选择器
标签选择器其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>。
例如下面代码:
- p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用:为p标签设置12px字号,行间距设置1.6em的样式。
类选择器
类选择器在css样式编码中是最常用到的,如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。
语法:
- .类选器名称{css样式代码;}
注意:
1、英文圆点开头
2、其中类选器名称可以任意起名(但不要起中文噢)
使用方法:
第一步:使用合适的标签把要修饰的内容标记起来,如下:
- <span>胆小如鼠</span>
第二步:使用class="类选择器名称"为标签设置一个类,如下:
- <span class="stress">胆小如鼠</span>
第三步:设置类选器css样式,如下:
- .stress{color:red;}/*类前面要加入一个英文圆点*/
ID选择器
- 在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:
- 为标签设置id="ID名称",而不是class="类名称"。
- ID选择符的前面是井号(#)号,而不是英文圆点(.)。
- 在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:
类和ID选择器的区别
- 相同点:可以应用于任何元素
不同点:
ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
- 可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
子选择器
- 还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码:
- .food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。
- 还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码:
包含(后代)选择器
- 包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:
- .first span{color:red;}
- 包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:
通用选择器
- 通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:
- * {color:red;}
- 通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:
伪类选择符
- 它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:
- a:hover{color:red;}
- 它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:
分组选择符
-
当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:
- h1,span{color:red;}
它相当于下面两行代码:
- h1{color:red;}
- span{color:red;}
-
CSS基本知识和选择器的更多相关文章
- 前端学习——css基础知识,选择器与html模板、值得收藏的html标签
一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...
- css基本知识、选择器
CSS 是指层叠样式表 (Cascading Style Sheets),基本语法规则如下 CSS 由两个主要的部分构成:选择器,以及一条或多条声明 声明以大括号{ }括起来,一个申明包括属性和值,属 ...
- HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...
- css基础知识之属性选择器
css属性选择器及属性和值选择器如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- HTML与CSS基础知识补遗(一)
开始从零基础系统地学习前端知识了,虽说html和css多少了解一些,但是学着还是能发现很多新大陆.... 一. HTML中head标签 1. <meta>标签: meta标签里是一些基础的 ...
- CSS样式----图文详解:css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
- css基本知识
WANGJUN59451 css基本知识 1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HT ...
- CSS 基本知识
1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的 ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
随机推荐
- Ioc正解
IoC是一种模式 IoC(Inversion of Control)中文译为控制反转,目前Java社群中流行的各种轻量级容器的实现都是以IoC模式作为基础的.控制反转意味着在系统开发过程中,设计的类将 ...
- 如何在IIS 7.5中部署Asp.Net MVC 5的网站
0 Sign in to vote 系统是 windwos 2008 已经安装.Net 4.0 和 .Net 4.5 已经安装MVC4 的需要文件,MVC5 找不见下载地方,求各位大哥告知一下在哪里可 ...
- Bootstap datetimepicker报错TypeError: intermediate value(转)
原文转自:http://blog.chinaunix.net/uid-20332519-id-5733546.html Bootstrap datetimepicker有多个版本,官方的链接中,只是d ...
- @ResponseBody 返回中文乱码问题解决 spingmvc
<!-- UTF8解决乱码问题 --> <bean class="org.springframework.web.servlet.mvc.method.annotation ...
- 27个知名企业品牌VI视觉识别系统规范手册
Apple公司视觉设计规范 微软公司VI视觉系统 星巴克企业视觉规范手册 DELL品牌VI视觉手册 MTRADING品牌视觉规范 KFC视觉设计规范手册 麦当劳视觉规范 LEGO乐高玩具的品牌视觉规范 ...
- SQL Server DBA日常查询视图_数据库性能视图
1.获取有关按平均CPU 时间排在最前面的五个查询的信息 total_worker_time/execution_count AS [Avg CPU Time], ), ((CASE qs.state ...
- 在Ext JS 6中添加本地化包
我在官方论坛发的帖子终于有人恢复了,也终于知道如何添加本地化包了.在Ext JS 6中,Ext JS属于经典工具包,而本地化是包含在经典工具包中,因而在app.json中,要添加本地化包,必须在cla ...
- 第四周psp
10号 类别c 内容c 开始时间s 结束e 中断I 净时间T GUI 查资料 12:10 12:40 0m 30m GUI 安装QT 19:10 21:00 20m 90m GUI 学习QT 23:0 ...
- day6-2面向对象
概述: 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发“更快更好更强...” 注:Java和C#来 ...
- 14. Reverse Linked List II
Reverse Linked List II Reverse a linked list from position m to n. Do it in-place and in one-pass. F ...