总结了一下css的部分基础知识点。---css学习笔记01
一. css基础
1. 什么是css
层叠样式表：层叠
2. css的三种使用方式
style 属性 --》
<div style="css属性值"></div>
style 属性 --》写在head标签里
<head>
<style>
...
</style>
</head>
link 外都引入单独的css文件 --》
<link rel="stylesheet" href="style.css">
3. css 三种基础选择器
html标签选择器
- 通过标签名当选择器来使用。
- 无论藏的多深都可以被选中。
- 选择的是所有的标签，通常通过标签选择器设置共性问题。
id选择器 #id名
- id的名字是唯一的。
- 任何的标签都可以具有id属性（id是全局属性）。大小写敏感，给元素设置id时（设置class时也一样），可以使用驼峰命名法。
class选择器 .class名
- class属性名可以重复使用。
- 任何标签都可以有class属性（全局属性）
- class的值可以有多个。
<h1 class="t1 t2"></h1>
通配符 *
- 选择所有的标签，能少用就少用。
二. 综合选择器
- 后代选择器 div p
div p 选中的是div 里面的p标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<div>
<p>p1</p>
</div>
<p>p2</p>
</body>
</html>
- 交集选择器 div.d1
div.d1 选择div与class="d1"的交集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.d1 {
color: red;
}
</style>
</head>
<body>
<div class="d1">
div1
</div>
<div class="d2">
div2
</div>
</body>
</html>
- 并集选择器 div,p
div，p 选择所有的div和p标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.d1,p.p1 {
color: red;
}
</style>
</head>
<body>
<div class="d1">div1</div>
<div class="d2">div2</div>
<p class="p1">p1</p>
<p class="p2">p2</p>
</body>
</html>
- 子元素选择器 div>p --css3出现的
div>p 选择div标签的子元素里面的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.d1>p {
font-size: 50px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
<p class="p1">div-div-p</p>
</div>
<p class="p2">div-p</p>
</div>
</body>
</html>
- 序列选择器：first-child ：last-child
：first-child ：last-child 用来选择列表中的第一个和最后一个，不能选择其它的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul li:first-child {
color: red;
}
ul li:last-child {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
</body>
</html>
- 相邻兄弟选择器 div + p
div + p 选择与div相邻的一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1 + p {
color: red;
}
</style>
</head>
<body>
<div class="d1">div1</div>
<p class="p1">p1</p>
<p class="p2">p2</p>
</body>
</html>
- 普通兄弟选择器 div ~ p
div ~ p 选择与div同一级的其它子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1 ~ p {
color: red;
}
</style>
</head>
<body>
<div class="d1">div1</div>
<p class="p1">p1</p>
<p class="p2">p2</p>
</body>
</html>总结了一下css的部分基础知识点。---css学习笔记01的更多相关文章
- Swift基础知识点的学习
每一个程序员都有一颗不满足当下知识的学习,学习Swift更是每一个iOS程序员必学技能!!! 一说道基础点的学习,当然涵盖的方面也是很多很多啦....然而每一个小知识点的学习,写一个博客,我也觉得没什 ...
- animate.css –齐全的CSS3动画库--- 学习笔记
animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...
- CSS学习笔记01 CSS简介
1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...
- 《Python编程：从入门到实践》基础知识部分学习笔记整理
简介 此笔记为<Python编程:从入门到实践>中前 11 章的基础知识部分的学习笔记,不包含后面的项目部分. 书籍评价 从系统学习 Python 的角度,不推荐此书,个人更推荐使用< ...
- 从实例学习 Go 语言、"基础与进阶" 学习笔记及心得体会、Go指南
第一轮学习 golang "基础与进阶"学习笔记,Go指南练习题目解析.使用学习资料 <Go-zh/tour tour>.记录我认为会比较容易忘记的知识点,进行补充,整 ...
- 网络编程4--毕向东java基础教程视频学习笔记
Day24 06 自定义浏览器-Tomcat服务端07 自定义图形界面浏览器-Tomcat服务端08 URL-URLConnection09 小知识点10 域名解析 06 自定义浏览器-Tomcat服 ...
- Delphi基础语法的学习笔记和注意事项总结
以下是我在自学Delphi的时候,对一些注意点的简单总结,并没有什么系统性可言,只是一个学习时顺手记下的笔记,主要为了当时加深对知识的印象,并没有希望能在以后的复习和使用Delphi中有什么多大的参考 ...
- IO流01--毕向东JAVA基础教程视频学习笔记
提要 01 IO流(BufferedWriter)02 IO流(BufferedReader)03 IO流(通过缓冲区复制文本文件)04 IO流(readLine的原理)05 IO流(MyBuffer ...
- PHP学习笔记01——基础语法
<!DOCTYPE html> <html> <?php // 1.使用$加变量名来表示变量,php是弱类型语言,不要求在使用变量前声明,第一次赋值时变量才被创建 $a ...
随机推荐
- 记忆化搜索 E - Loppinha, the boy who likes sopinha Gym - 101875E
E - Loppinha, the boy who likes sopinha Gym - 101875E 这个题目是一个dp,这个应该很容易看出来,但是对于状态的定义其实有点难去想, 看了题解dp[ ...
- HTTP头部信息和错误代码详解-《HTTP权威指南》
最近在调试 前后端分离的请求测试,遇到了一个405错误, 无法接受,于是开始了人肉搜索405. 最后 还是HTTP头部信息里的Accept:application/json 这个Accept 导致的, ...
- 【HBase】通过Java代码实现HBase数据库中数据的增删改查
目录 创建maven工程,导入jar包 java代码实现创建hbase表 java代码实现向hbase表中插入数据 java代码查询hbase数据 使用rowKey查询指定列族指定列的值 通过star ...
- FOC：在MCU上检验Clark和Park坐标变换是否正确
文章目录 前言 程序 头文件 clark 变换 C实现 park c 变换实现 仿真 前言 仿真简单,可以参考仿真的结果,但是实际中将代码移植到MCU,会出现一些新的问题,所以需要对坐标变换部分算法进 ...
- [hdu5402 Travelling Salesman Problem]YY
题意:给一个n*m的矩形,每个格子有一个非负数,求一条从(1,1)到(n,m)的路径(不能经过重复的格子),使得经过的数的和最大,输出具体的方案 思路:对于row为奇数的情况,一行行扫下来即可全部走完 ...
- [hdu4358]树状数组
思路:用一个数组记录最近k次的出现位置,然后在其附近更新答案.具体见代码: #pragma comment(linker, "/STACK:10240000,10240000") ...
- Python Web自动化测试入门与实战，从入门到入行
Python Web自动化测试入门与实战 购买地址 · 京东:https://item.jd.com/69239480564.html 天猫:https://detail.tmall.com/it ...
- Mysql 常用函数（9）- reverse 函数
Mysql常用函数的汇总,可看下面系列文章 https://www.cnblogs.com/poloyy/category/1765164.html reverse 的作用 将字符串反转,即顺序取反 ...
- Mysql 常用函数（5）- substring 函数
Mysql常用函数的汇总,可看下面系列文章 https://www.cnblogs.com/poloyy/category/1765164.html substring 的作用 截取指定范围的字符串, ...
- java ->包的声明与访问
包的声明与访问 包的概念 java的包,其实就是我们电脑系统中的文件夹,包里存放的是类文件. 当类文件很多的时候,通常我们会采用多个包进行存放管理他们,这种方式称为分包管理. 在项目中,我们将相同功能 ...