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 ...
随机推荐
- Leetcode ——Lowest Common Ancestor of a Binary Tree
Question Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. ...
- java中集合格式及json格式的特点和转换
作者原创:转载请注明出处 今天在写代码,遇到一个难点,由于要调用webservice接口,返回的为一个list集合内容,从webservice调用接口返回的为一个string的io流, 在调用接口的地 ...
- C语言中生产随机数 rand()函数
参考资料:C语言中产生随机数 一:如果你只要产生随机数而不需要设定范围的话,你只要用rand()就可以了:rand()会返回一随机数值, 范围在0至RAND_MAX 间.RAND_MAX定义在stdl ...
- UVa 140 带宽
题意:给出一个n个结点的图G和一个结点的排列,定义结点的带宽为i和相邻结点在排列中的最远距离,求出让带宽最小的结点排列. 思路:用STL的next_permutation来做确实是很方便,适当剪枝一下 ...
- 《F4+2—团队项目设计完善&编码测试》
1:根据OOD详细设计工作要点,修改完善团队项目系统设计说明书和详细设计说明 a.软件系统设计说明书的完善 将测试启动准则,测试结束准则,测试暂停/中止标准加到了测试计划中.将把在测试中会 ...
- 《A_Pancers团队》作业5—团队项目需求改进与系统设计
一:团队项目需求改进 1. <音乐播放软件需求规格说明书>的不足 在上周的<音乐播放软件需求规格说明书>我们还需要改进的地方有:1.搜索功能:2.界面的简洁美观化:3.按键的重 ...
- 《剑指offer》第三十六题（二叉搜索树与双向链表）
// 面试题36:二叉搜索树与双向链表 // 题目:输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求 // 不能创建任何新的结点,只能调整树中结点指针的指向. #include < ...
- Python 爬虫-Scrapy爬虫框架
2017-07-29 17:50:29 Scrapy是一个快速功能强大的网络爬虫框架. Scrapy不是一个函数功能库,而是一个爬虫框架.爬虫框架是实现爬虫功能的一个软件结构和功能组件集合.爬虫框架是 ...
- 雷林鹏分享：Ruby 环境变量
Ruby 环境变量 Ruby 解释器使用下列环境变量来控制它的行为.ENV 对象包含了所有当前设置的环境变量列表. 变量描述 DLN_LIBRARY_PATH动态加载模块搜索的路径. HOME当没有参 ...
- 20170621xlVBA跨表转换数据
Sub 跨表转置() Dim Wb As Workbook Dim Sht As Worksheet Dim oSht As Worksheet Dim Rng As Range Dim Index ...