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 ...
随机推荐
- 详解一下 javascript 中的比较
翻译自:http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3 在JS中的关系比较(Relational Comparison)运算,指的 ...
- Jquery 移除某一个div下面的所有img图片
function one(){ $('#dimg img').remove(); }
- MVC ---- Manager.ttinclude内容
http://www.infoq.com/cn/news/2009/11/T4-Multiple-Output 初次认识并尝试使用T4生成代码的时候,相关学习资料似乎比较少.不过现在VS2010 的M ...
- Codeforces Beta Round #95 (Div. 2) D. Subway dfs+bfs
D. Subway A subway scheme, classic for all Berland cities is represented by a set of n stations conn ...
- shell模拟ctrl c停止
kill命令可以带信号号码选项,也可以不带. 如果没有信号号码,kill命令就会发出终止信号(15),这个信号可以被进程捕获,使得进程在退出之前可以清理并释放资源. 也可以用kill向进程发送特定的信 ...
- js 文件上传
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- VSAN Cluster Failed
failed message:AdVanced vSAN configuration in syncChecks if all of the hosts in a vSAN cluster have ...
- LeetCode--226--翻转二叉树
问题描述: 翻转一棵二叉树. 示例: 输入: 4 / \ 2 7 / \ / \ 1 3 6 9 输出: 4 / \ 7 2 / \ / \ 9 6 3 1 备注: 这个问题是受到 Max Howel ...
- Non-parseable POM 解决方法
两个build放在一起当然不行,把它们类似这样的合并起来.
- 『TensorFlow』通过代码理解gan网络_中
『cs231n』通过代码理解gan网络&tensorflow共享变量机制_上 上篇是一个尝试生成minist手写体数据的简单GAN网络,之前有介绍过,图片维度是28*28*1,生成器的上采样使 ...