html基础-css-选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 指定编码 -->
<title>liudaozhang</title>
<link rel="shortcut icon" href="http://www.xxxxx.cn:80/wp-content/logo.jpg">
<!--<link rel="stylesheet" href="jjj.css"> 这是第三种___引入css-->
<!--<link rel="stylesheet" href="jjj2.css"> 这是第三种___引入css-->
<style>
/*id选择器 这是第二种方式*/
/*#i1{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/
/*这里会先引用style中的标签,然后在引用link中jjj2 再试jjj中的标签*/ /*class选择器*/
/*.c1{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/ /*标签选择器*/
/*div {*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/ /*标签层级选择器 --行内标签无法应用 宽 高等属性*/
/*div span{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/ /*class层级选择器*/
/*.c2 span{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/ /*id层级选择器*/
/*#i2 span{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/ /*id组合选择器*/
/*#i1,#i2,#i3{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*margin-top: 5px; 间隔作用*/
/*}*/ /*class组合选择器*/
/*.c1,.c2,.c3{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*margin-top: 5px;*/
/*}*/ /*属性选择器*/
/*div[jjj='abc']{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*margin-top: 5px;*/
/*}*/ </style> </head>
<body> <!--1、可以在任意标签中添加style属性,增加css样式-->
<!--<div style="height: 100px;width: 100px;border:red 2px solid;"></div>-->
<!--<div id="i1"></div> 引入i1选择器--> <!--2、head中style添加css样式-->
<!--理解:在标签当中增加了一个id的属性 他的属性就是i1 在head中通过style标签,以id选择器的方式 #i1写了一个css样式 他引用到了div这个标签上-->
<!--简单的说 就是在head中写了id选择器i1 写了css样式 在后面的div标签中引用了这个--> <!--3、引入 css-->
<!--<div id="i2"></div> 引入i2选择器-->
<!--选择器在是唯一的 不能重复 重复就会报错--> <!--测试三种引入css样式的方式的优先级-->
<!--<div id="i1" style="height: 100px;width: 100px;"></div>-->
<!--顺序 先引用--这里是为了测试优先级 所以选择器都是使用的i1-->
<!--1、 标签中css style属性 优先级最高 也就是div后面的优先级别是最高的-->
<!--2、引入的css和head中的style中的标签的优先级 主要是看在head中是由下往上一次查找 那个在最下面就先被引用--> <!--id选择器不能重复 但是class是可以重复的--> <!--<div class="c1"></div> class选择器-->
<!--<div class="c1"></div>--> <!--<div></div> /*标签选择器*/--> <!--<div>-->
<!--行内标签无法应用 宽 高 --层级选择器-->
<!--<span>1</span>-->
<!--</div>--> <!--<div> class层级选择器-->
<!--行内标签无法应用 宽 高 --层级选择器-->
<!--<div class="c2">-->
<!--<span>12222</span>-->
<!--</div>-->
<!--</div>--> <!--<div> id层级选择器-->
<!--<div id="i2">-->
<!--<span>2222</span>-->
<!--</div>-->
<!--</div>--> <!--<div id="i1"></div> id组合选择器-->
<!--<div id="i2"></div>-->
<!--<div id="i3"></div>--> <!--<div class="c1"></div> class组合选择器-->
<!--<div class="c2"></div>-->
<!--<div class="c3"></div>--> <!--<div jjj="abc"></div> 属性选择器--> </body>
</html>
html基础-css-选择器的更多相关文章
- css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...
- css基础,css选择器
07.29自我总结 css基础 一.什么是CSS CSS是级联样式表 CSS术语标记语言,没有逻辑 CSS作用 完成网页内容的样式与布局 二.CSS的三种引入方式 1. 内联式 书写位置:在 head ...
- HTML+css基础 css选择器的种类
css选择器的种类 标签 权重是001 类 class权重是0010 相当于255个标签选择器 Id 权重是0100相当于255个类 *通配符 代表所有的标签 权重是0000 后代选 ...
- HTML+css基础 css选择器 选择器的权重
css选择器 选择器的权重 在css中,哪个选择器的权重高,就走谁的样式 标签选择器的权重是1 class选择器的权重是10 Id选择器的权重是100 行间样式的权重是1000 带有关键字 !imp ...
- Scrapy基础------css选择器基础
基本语法: * 选择所有节点 #container 选择id为container的节点 .container 选择所有class包含container的节点 li a 选取所有li 下所有a节点 ul ...
- HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- html基础和CSS选择器
一.html简单基础 什么是HTML HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言,而是一种标 ...
- HTML&CSS基础-属性选择器
HTML&CSS基础-属性选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- HTML&CSS基础-常用选择器
HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
随机推荐
- POJ.1426 Find The Multiple (BFS)
POJ.1426 Find The Multiple (BFS) 题意分析 给出一个数字n,求出一个由01组成的十进制数,并且是n的倍数. 思路就是从1开始,枚举下一位,因为下一位只能是0或1,故这个 ...
- 【Django实例】博客1
(上一篇) 一.概述 Blog是一个博客应用. dbe工程的目录结构,参考<序言>的最后部分.blog应用位于/home/russellluo/Django/dbe/dbe/blog目录下 ...
- miya--图片上传--搭建分布式文件服务器(FastDFS+Nginx)
资料获取(FastDFS+Nginx): 链接:https://pan.baidu.com/s/1kUI5WH5 密码:kzfd 安装rz,sz功能: yum install lrzsz 主攻: 利用 ...
- Function.caller, arguments.caller, arguments.callee, arguments.callee.calller
Function.caller指向当前函数的调用者,是arguments.caller的替代者 arguments.caller也是指向当前函数的调用者,已被废弃 arguments.callee是对 ...
- Python3 字典 update() 方法
Python3 字典 描述 Python 字典 update() 函数把字典dict2的键/值对更新到dict里. 语法 update()方法语法: dict.update(dict2) 参数 di ...
- 2018-2019 ACM-ICPC 沈阳赛区 K. Let the Flames Begin
K. Let the Flames Begin 题目链接:https://codeforces.com/gym/101955/problem/K 题意: n个人围成一个圈,然后依次从1开始报数,报到k ...
- powerdesigner中物理模型与sql脚本的以及与数据库的连接设置
使用JDBC连接失败的解决方案: http://blog.csdn.net/t37240/article/details/51595097 使用powerdesigner工具我们可以方便的根据需求分析 ...
- hihoCoder #1582 : Territorial Dispute 凸包
#1582 : Territorial Dispute 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 In 2333, the C++ Empire and the Ja ...
- go defer注意点,很容易出错的!!!
1:defer是在return之前执行的 函数返回的过程是这样的:先给返回值赋值,然后调用defer表达式,最后才是返回到调用函数中 返回值 = xxx 调用defer函数 空的return fun ...
- Java设计模式の责任链模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述责任链(Chain of Responsibility)模式的: 责任链模式是一种对象的行为模式.在责任链模式里,很多对象由每一个对象对其 ...