css 课堂笔记
css：层叠样式表 Cascading( [kæ'skeɪdɪŋ] 级联)Style Sheet
css基本语法结构：选择器{
属性：值;
属性：值；
...
}
三种主要的选择器：
标签选择器：
以HTML标签命名的选择器,直接控制对应的标签
p{font-size:16;}
类选择器：
在标签内加入class属性，选择器名为“.”加上对应的class属性值
.p1{font-size:16px;}
...
<p class="p1">.......</p>
ID选择器：
在标签内加入id属性，id属性不可以重复，选择器名为"#"加上id属性值
#p1{font-size:16px;}
...
<p id="p1">...</p>
ID选择器优先级>类选择器>标签选择器
<span></span>范围标签
HTML中引入css样式：
行内引用，就是在标签中加style属性然后设置
<p style="font-size:16px;" >...</p>
内部引用：
在<head>标签里面加上<style>标签以及一些声明：
<head>
<title></title>
<style type="text/css">
....写各种选择器
</style>
</head>
外部引用：
首先新建css文件，css文件以.css为后缀名，可以有声明编码，其他与在HTML内完全相同。
@charset "utf-8";
/* CSS Document */
p{
font-size:16px;
}
在HTML内引用外部样式表，两种方式：
都是在head标签里面引入外部样式表
1、链接外部样式表：
<link href="1.css" rel="stylesheet" type="text/css" />
2、导入外部样式表：
<style type="text/css">
@import url("1.css");
</style>
导入我的理解，显示搭建好了css的空间，然后利用url属性将对应css内容引入进来。
链接式与导入式的区别：
1、链接式是先加载到网页，网页再编译，导入式是先编译网页再加载样式
2、导入的样式表后面属于特殊的内部样式表，必须放在<style>中的第一行，后面还可以书写css代码
3、js操作只能改变link链接的样式表的内容，无法操作import的
4、多页面同时link一个css会比导入要慢
复合选择器：
后代选择器
在HTML中<a><b>x</b></a>
如果设置在被a包裹的b标签的内容，就可以使用后代选择器
规则： 外层标签写在前面，内层标签写在后面，中间使用空格分隔
标签嵌套的时候，内层标签称为外层标签的后代
p span{
font-size:30px;
color:yellow;
}
<p>hello,<span>你好</span></p>
注意：选择器名的嵌套的不只是标签，类选择器名也可以
p .sp{
font-size:30px;
color:blue;
}
交集选择器
交集选择器控制的是两个选择器的交集的内容。注意：这和后代选择器本质上是不同的。这指的是既可以使用第一个选择器控制又可以使用第二个选择器控制的同一个标签的内容。
书写规则：
第一个必须是标签选择器，第二个必须是类选择器或者ID选择器，两个选择器之间不能有空格，紧密连接
<p id="yu">你好,对的</p>
<p>你好，<span class="me">好吗</span></p>
p#yu{
background-color:#3F6;
}
p.me{
background-color:#3F6;
}
测试结果：对的能出背景，好吗不能出背景
并集选择器
多个选择器的交集
规则，多个选择器用逗号连接而成。
p,table{
background-color:green;
}
<p>你好，<span class="me">好吗</span></p>
<table>
<tr>
<td><input type="text" /></td>
</tr>
</table>
css中的继承
子标签继承父标签风格
子标签不影响父标签样式风格
css 课堂笔记的更多相关文章
- ocp11g培训内部教材_052课堂笔记(042)_体系架构
OCP 052 课堂笔记 目录 第一部分: Oracle体系架构... 4 第一章:实例与数据库... 4 1.Oracle 网络架构及应用环境... 4 2.Oracle 体系结构... 4 3. ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
随机推荐
- triggerHandler不执行事件默认值
<input type="text" /> $('input').triggerHandler('focus');
- Java8的新特性,二进制序列转十进制数字
package kata_007_二进制序列转十进制int; /** * java8 Lambda表达式转换binary序列->十进制数 */ import java.util.ArrayLis ...
- 如何解决Visual Studio2010 编译时提示系统找不到指定文件问题
前一段时间,开始使用vs2010编写程序,可是在编译的时候总是报错,提示系统找不到指定文件,导致无法正常运行程序,花了好久时间终于找到原因解决,是因为常规的输出目录 要与链接的常规的输出文件要相对应. ...
- BZOJ 1015: [JSOI2008]星球大战starwar（并查集求连通块+离线处理）
http://www.lydsy.com/JudgeOnline/problem.php?id=1015 题意: 思路:好题啊!!! 这道题目需要离线处理,先把所有要删的点给保存下来,然后逆序加点,这 ...
- UVa 225 黄金图形（回溯+剪枝）
https://vjudge.net/problem/UVA-225 题意:平面上有k个障碍点,从(0,0)出发,第一次走1个单位,第二次走2个单位,...第n次走n个单位,最后恰好回到(n,n).每 ...
- UVa 11491 奖品的价值
https://vjudge.net/problem/UVA-11491 题意:一个n位整数,删除其中的d个数字,输出最大值. 思路:肯定从高位开始分析,代码如下. #include<strin ...
- ajax专题
什么是ajax?他可以用来做什么? 1.首先,ajax不是一种编程语言,是一种在无需重新加载整个网页的情况下能够更新部分网页的技术. 优点:通过和后台服务器进行少量的数据交换,网页就能异步的局部跟新, ...
- Nginx 多重条件判断
server{ listen 80; server_name xxx.com; index index.html index.htm index.php admin.php; root /home/w ...
- django 动态生成CSV文件
CSV (Comma Separated Values),以纯文本形式存储数字和文本数据的存储方式.纯文本意味着该文件是一个字符序列,不含必须像二进制数字那样的数据.CSV文件由任意数目的记录组成,记 ...
- 《剑指offer》第三十二题（之字形打印二叉树）
// 面试题32(三):之字形打印二叉树 // 题目:请实现一个函数按照之字形顺序打印二叉树,即第一行按照从左到右的顺 // 序打印,第二层按照从右到左的顺序打印,第三行再按照从左到右的顺序打印, / ...