css基础语法一（选择器与css导入方式）
页面中，所有的CSS代码，需要写入到<style></style>标签中。style标签的type属性应该选择text/css，但是type属性可以省略。
CSS修改页面中的所有标签，必须借助选择器选中。选择器中，可以写多对CSS属性，用{}包裹： 每个属性名与属性值之间用:分隔，多对属性之间，必须用;分隔。
选择器{
属性1:属性值1;
属性2:属性值2;
}
【CSS常用选择器】
1、标签选择器
写法： HTML标签名{}
作用： 可以选中页面中，所有与选择器同名的HTML标签。
2、 类选择器(class选择器)
写法： .class名{}
调用： 在需要调用选择器样式的标签上，使用class="class名"调用选择器
优先级： >标签选择器
3、ID 选择器
写法： #ID名{}
调用： 需要调用样式的标签，起一个id="ID名"
优先级： ID选择器>class选择器
注意： 一个页面中，不能出现同名ID
【Class选择器与ID选择器的区别】
1、 写法不同:class选择器用.声明，ID选择器用#声明；
2、 优先级不同： ID选择器>class选择器
3、 作用范围不同： class选择器可以多次调用，ID选择器只能使用一次。
【选择器的命名规范】
1、只能有字母、数字、下划线、减号组成；
2、 开头不能是数字。也不能是只有一个减号。
一般，起名要求有语义，使用英文单词与数字的组合。
4、通用选择器
写法： *{}
作用： 可以选中页面中所有的HTML标签。
优先级： 最低！！！
5、并集选择器
写法： 选择器1,选择器2,……,选择器n{}
生效规则： 多个选择器取并集，只要标签满足其中任意一个选择器，样式即可生效。
6、交集选择器
写法： 选择器1选择器2……选择器n{} 所有选择器紧挨着，没有分隔
生效规则： 多个选择器取交集，则必须满足所有选择器的要求，才能生效
7、后代选择器
写法： 选择器1 选择器2 …… 选择器n{} 选择器之间空格分隔
生效规则： 只要满足，后一选择器是前一个选择器的后代，即可成效。（后代包括子代、孙代、重孙代。。。）
通俗的讲：只要后一个选择器，在前一个选择器里面即可。
8、子代选择器
写法： 选择器1>选择器2>……>选择器n{} 选择器之间用>分隔
生效规则： 必须满足，后一个选择器是前一个选择器的直接子代，才能生效。（中间不能间隔任何标签）
【优先级的权重问题】
1、CSS生效的第一原则是“近者优先”！即，哪个选择器作用于最里层标签，则这个选择器生效；
2、当选择器作用于同一层时，可以根据优先级权重，进行累加计算：
ID选择器*100 > class选择器*10 > 标签选择器*1
注意： 并集选择器，相当于多个选择器拆开写，所以，并集选择器的优先级不能累加。
3、 当选择器作用于同一层，且优先级权重相等时。则，写在最后的选择器生效。
【引入CSS的三种方式】
1、 行内样式表：直接在HTML标签中，使用style=""的方式引用；
<div style="height: 100px;"></div>
优点： 使用灵活，优先级权重最高？
缺点：不符合W3C关于“内容与表现分离”的要求；不利于样式复用；
2、 内部样式表： 在<head></head>标签中，使用<style>标签包裹CSS代码；
特点： 一定程度的实现了HTML与CSS的分离，但是分离不够彻底，没有办法多页面共用样式。
3、 外部样式表： 将CSS单独写入CSS文件中，并与HTML文件关联。
优点： 彻底实现HTML与CSS的分离，符合W3C规范，有利于多页面复用统一样式；
【 导入CSS文件的两种方式】
① 在<head>标签中，使用link链接：
<link rel="stylesheet" type="text/css"href="css/02-CSS.css" />
② 在<style>标签中，使用@import导入：
@import url("css/02-CSS.css");
【两种导入方式的区别】
① link属于标准的HTML标签，而@import不是标准标签；
② link可以兼容所有低版本浏览器，而@import只在CSS2之后能用；
③ link是将两个文件链接起来，起桥梁作用； 而@import相当于将CSS文件复制到HTML文件中；
④ link会在HTML文件边加载的过程中，边链接CSS文件；
@import会在HTML文件全部加载完以后，再导入CSS文件；
综上所述，我们使用link链接的方式，加载CSS文件。
css基础语法一（选择器与css导入方式）的更多相关文章
- CSS基础语法与选择器
CSS基础 语法 : <head> <style type="text/css"> 选择器(即修饰对象){ 修饰属性:属性值; 修饰属性:属性值; } &l ...
- CSS基础语法（一）
目录 CSS基础语法(一) 一.CSS简介 1.CSS语法规范 2.CSS代码风格 二.CSS基础选择器 1.标签选择器 2.类选择器 3.id选择器 4.通配符选择器 5.总结 三.CSS字体属性 ...
- HTML&CSS基础-伪元素选择器
HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- HTML&CSS基础-伪类选择器
HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- css基础-语法篇
CSS基础 1.css简介 cascading style sheets 汉译层叠样式表,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息 ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- HTML5——css基础语法
1.了解CSS CSS是一种用来表现HTML等文件样式的计算机语言,是对HTMl文件中设置的各种标签添加各种各样的样式与表达方式,让网页更生动,更美观. 2.导入CSS的三种方式 1.行内样式表:直接 ...
- CSS基础语法
一.CSS常用选择器 前言: 页面中,所有的CSS代码,需要写入到<style></style>标签中. style标签的type属性应该选择"text/css&qu ...
- H5取经之路——CSS基础语法
一.CSS常用选择器 [选择器的命名规则] * 1.只能有字母数字下划线组成,不能有其他任何字符 * 2.开头不能是数字 [通用选择器] * 1.写法:*{} * 2.选中页面中的所有标签 * 3.优 ...
随机推荐
- 用vue开发一个app（3，三天的成果）
前言 一个vue的demo 源码说明 项目目录说明 . |-- config // 项目开发环境配置 | |-- index.js // 项目打包部署配置 |-- src // 源码目录 | |-- ...
- 【京东详情页】——原生js爬坑之标签页
一.引言 要做详情页的商品评价等5个li的标签页转换,效果如下: 二.实现原理 有一个特别的地方:上面五个li,但下面只有四个容器(table/div). 设计的目的:无论点哪个li,只有前四个div ...
- touch.js——常见应用操作
touch.js--常见应用操作 基本事件: touchstart //手指刚接触屏幕时触发 touchmove //手指在屏幕上移动时触发 touchend //手指从屏幕上移开时 ...
- JAVA多线程---ThreadLocal<E>
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px ".SF NS Text" } tips: 1 当前ThreadLocal ...
- SGU180（树状数组，逆序对，离散）
Inversions time limit per test: 0.25 sec. memory limit per test: 4096 KB input: standard output: sta ...
- php中常用的字符串大小写转换函数实例解释
PHP字符串处理函数中,最为简单的几个函数,相关解释就不上了,直接看例子. PHP字符串处理函数中,最为简单的几个函数,相关解释就不上了,直接看例子. strtolower函数.strtoupper函 ...
- Linux基础命令讲解（二）
Linux命令基本格式: 命令 [参数] [路径文件] 方括号内容可省略 查看命令帮助手段: 1 man 命令名 (man 还可以获取配置文件,函数的帮助) 2 命令 --help 3 help 命令 ...
- 邮件实现详解（四）------JavaMail 发送（带图片和附件）和接收邮件
好了,进入这个系列教程最主要的步骤了,前面邮件的理论知识我们都了解了,那么这篇博客我们将用代码完成邮件的发送.这在实际项目中应用的非常广泛,比如注册需要发送邮件进行账号激活,再比如OA项目中利用邮件进 ...
- iOS将自己的框架更新到cocopods上
第一步 把自己的框架更新到github 上,为了提交地址给他人下载.这里就不详细介绍如何把项目更新到github上了 第二步 这个时候我们的项目已经挂在github上了我们需要给本地的项目新建一个Po ...
- 【转载】jQuery全屏滚动插件fullPage.js
文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...