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 ...
随机推荐
- UVa 10954 全部相加（Huffman编码）
https://vjudge.net/problem/UVA-10954 题意:有n个数的集合S,每次可以从S中删除两个数,然后把它们的和放回集合,直到剩下一个数.每次操作的开销等于删除的两个数之和, ...
- Ubuntu下配置ＪＤＫ
1. 首先你需要到oracle官网下载最新版本的JDK.跑到oracle官网,自己到Download下面找找吧 2.转到下载路径,对下载后的文件解压缩,比如我下载的文件名为jdk-7u7-linux- ...
- python 本地化 local
locale 模块提供了 C 本地化( localization )函数的接口, 如 Example 8-1 所示. 同时提供相关函数, 实现基于当前 locale 设置的数字, 字符串转换. (而 ...
- 关于nohup 和 &的使用
nohup 是 no hang up 的缩写,意思是不挂断运行,一直运行下去,永久运行下去,但是注意并没有后台运行的功能 & 是在后台运行的意思 单独使用一个命令,还不能在终端关闭的时候,让 ...
- Qt5.3.2_CentOS6.4_x86_调试源码关联【勿删，简洁】
1. Qt5.3.2 --> Tools --> Options... --> 左侧选择"Debugger" --> 然后选择"General&q ...
- [ios]ios语音识别
参考:http://blog.sina.com.cn/s/blog_923fdd9b0101flx1.html 通过谷歌语音接口的实现语音识别 最近在项目中有需要实现语音识别的功能.折腾了几天才搞好. ...
- Java成神之路技术整理
关于 Java 的技术干货,从以下几个方面汇总. Java 基础篇 Java 集合篇 Java 多线程篇 Java JVM篇 Java 进阶篇 Java 新特性篇 Java 工具篇 Java 书籍篇 ...
- flash破解工具/flash decompiler
如果想比较方便地参观浏览一下flash(swf)文件里面的内容,推荐使用国外免费开源的工具JPEXS Free Flash Decompiler. 传送门:https://www.free-decom ...
- SVN同步版本库与网站目录
如何创建SVN版本库及同步文件到WEB目录 来源:空谷 一 安装与配置SVN 1.安装subversion centos: yum install subversion ubuntu: apt-get ...
- 20161208xlVBA工作表数据导入Access
Sub InsertToDataBase() Dim DataPath As String Dim SQL As String Const DataName As String = "yun ...