一. css基础

1. 什么是css

层叠样式表：层叠

2. css的三种使用方式

style 属性 --》

  1. <div style="css属性值"></div>

style 属性 --》写在head标签里

  1. <head>
  2. 	<style>
  3. 		...
  4. 	</style>
  5. </head>

link 外都引入单独的css文件 --》

  1. <link rel="stylesheet" href="style.css">

3. css 三种基础选择器

  • html标签选择器

    1. 通过标签名当选择器来使用。
    2. 无论藏的多深都可以被选中。
    3. 选择的是所有的标签，通常通过标签选择器设置共性问题。

  • id选择器 #id名

    1. id的名字是唯一的。
    2. 任何的标签都可以具有id属性（id是全局属性）。大小写敏感，给元素设置id时（设置class时也一样），可以使用驼峰命名法。

  • class选择器 .class名

    1. class属性名可以重复使用。
    2. 任何标签都可以有class属性（全局属性）
    3. class的值可以有多个。<h1 class="t1 t2"></h1>

  • 通配符 *

    • 选择所有的标签，能少用就少用。

二. 综合选择器

    1. 后代选择器 div p

div p 选中的是div 里面的p标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style>
  7. 		div p {
  8. 			color: red;
  9. 	}
  10. 	</style>
  11. </head>
  12. <body>
  13. 	<div>
  14. 		<p>p1</p>
  15. 	</div>
  16. 	<p>p2</p>
  17. </body>
  18. </html>
    1. 交集选择器 div.d1

div.d1 选择div与class="d1"的交集

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style>
  7. 	div.d1 {
  8. 		color: red;
  9. 	}
  10. </style>
  11. </head>
  12. <body>
  13. <div class="d1">
  14. 	div1
  15. </div>
  16. <div class="d2">
  17. 	div2
  18. </div>
  19. </body>
  20. </html>
    1. 并集选择器 div,p

div，p 选择所有的div和p标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style>
  7. 	div.d1,p.p1 {
  8. 		color: red;
  9. 	}
  10. </style>
  11. </head>
  12. <body>
  13. 	<div class="d1">div1</div>
  14. 	<div class="d2">div2</div>
  15. 	<p class="p1">p1</p>
  16. 	<p class="p2">p2</p>
  17. </body>
  18. </html>
    1. 子元素选择器 div>p --css3出现的

div>p 选择div标签的子元素里面的标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style>
  7. 		div.d1>p {
  8. 			font-size: 50px;
  9. 		}
  10. 	</style>
  11. </head>
  12. <body>
  13. 	<div class="d1">
  14. 		<div class="d2">
  15. 			<p class="p1">div-div-p</p>
  16. 		</div>
  17. 		<p class="p2">div-p</p>
  18. 	</div>
  19. </body>
  20. </html>
    1. 序列选择器：first-child ：last-child

：first-child ：last-child 用来选择列表中的第一个和最后一个，不能选择其它的。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style>
  7. 		ul li:first-child {
  8. 			color: red;
  9. 		}
  10. 		ul li:last-child {
  11. 			color: blue;
  12. 		}
  13. 	</style>
  14. </head>
  15. <body>
  16. 	<ul>
  17. 		<li>第一行</li>
  18. 		<li>第二行</li>
  19. 		<li>第三行</li>
  20. 		<li>第四行</li>
  21. 	</ul>
  22. </body>
  23. </html>
    1. 相邻兄弟选择器 div + p

div + p 选择与div相邻的一个元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style>
  7. 		.d1 + p {
  8. 			color: red;
  9. 		}
  10. 	</style>
  11. </head>
  12. <body>
  13. 	<div class="d1">div1</div>
  14. 	<p class="p1">p1</p>
  15. 	<p class="p2">p2</p>
  16. </body>
  17. </html>
    1. 普通兄弟选择器 div ~ p

div ~ p 选择与div同一级的其它子元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style>
  7. 		.d1 ~ p {
  8. 			color: red;
  9. 		}
  10. 	</style>
  11. </head>
  12. <body>
  13. 	<div class="d1">div1</div>
  14. 	<p class="p1">p1</p>
  15. 	<p class="p2">p2</p>
  16. </body>
  17. </html>

总结了一下css的部分基础知识点。---css学习笔记01的更多相关文章

  1. Swift基础知识点的学习

    每一个程序员都有一颗不满足当下知识的学习,学习Swift更是每一个iOS程序员必学技能!!! 一说道基础点的学习,当然涵盖的方面也是很多很多啦....然而每一个小知识点的学习,写一个博客,我也觉得没什 ...

  2. animate.css –齐全的CSS3动画库--- 学习笔记

    animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...

  3. CSS学习笔记01 CSS简介

    1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...

  4. 《Python编程：从入门到实践》基础知识部分学习笔记整理

    简介 此笔记为<Python编程:从入门到实践>中前 11 章的基础知识部分的学习笔记,不包含后面的项目部分. 书籍评价 从系统学习 Python 的角度,不推荐此书,个人更推荐使用< ...

  5. 从实例学习 Go 语言、"基础与进阶" 学习笔记及心得体会、Go指南

    第一轮学习 golang "基础与进阶"学习笔记,Go指南练习题目解析.使用学习资料 <Go-zh/tour tour>.记录我认为会比较容易忘记的知识点,进行补充,整 ...

  6. 网络编程4--毕向东java基础教程视频学习笔记

    Day24 06 自定义浏览器-Tomcat服务端07 自定义图形界面浏览器-Tomcat服务端08 URL-URLConnection09 小知识点10 域名解析 06 自定义浏览器-Tomcat服 ...

  7. Delphi基础语法的学习笔记和注意事项总结

    以下是我在自学Delphi的时候,对一些注意点的简单总结,并没有什么系统性可言,只是一个学习时顺手记下的笔记,主要为了当时加深对知识的印象,并没有希望能在以后的复习和使用Delphi中有什么多大的参考 ...

  8. IO流01--毕向东JAVA基础教程视频学习笔记

    提要 01 IO流(BufferedWriter)02 IO流(BufferedReader)03 IO流(通过缓冲区复制文本文件)04 IO流(readLine的原理)05 IO流(MyBuffer ...

  9. PHP学习笔记01——基础语法

    <!DOCTYPE html> <html> <?php // 1.使用$加变量名来表示变量,php是弱类型语言,不要求在使用变量前声明,第一次赋值时变量才被创建 $a ...

随机推荐

  1. centos7启动httpd服务失败：Job for httpd.service failed because the control process exited with error code.

    centos7启动httpd命令有两个可以用 service httpd start    systemctl start httpd.service 如果出现如下报错 Job for httpd.s ...

  2. jmeter录制rabbitmq消息-性能测试

     一.目的 为了测试系统的稳定性,在UAT环境下,通一段时间内不间断发送MQ消息来验证系统是否会出现异常. 二.测试工具 使用测试工具:jmeter5.2.1,火狐浏览器71.0,RabbitMQ管理 ...

  3. ThinkPad BIOS

    ThinkPad-BIOS    如有问题指出 ~谢谢

  4. React-Redux填坑

    这篇东西以后慢慢补充. Q:今天遇到一个问题是 TypeError:dispatch is not a function A:一直报这个type error,调试了好一阵,最后在tof上看到网友说co ...

  5. Enjoy the pain about Moloch

    这echo出来的啥子嘛?意思是小姐姐有自虐倾向?可若是moloch有汉化包或翻译文件,小姐姐至于这么“享受”install的过程吗? 过程都走过了,那就记录一下吧:1.找个Ubuntu镜像,阿里云镜像 ...

  6. jupyter notebook 修改前端样式

    目录 jupyter notebook主题 修改css和js 最终效果 jupyter notebook主题 作者的GitHub地址:https://github.com/dunovank/jupyt ...

  7. 用了这么多年MySql，这些好习惯你用过哪些

    一:新建表和字段建议: 1.所有数据表和字段要有清晰的注释,字段说明 说明:不管是创建者还是其他开发或者后续维护者都能清楚知道数据表和字段定义的含义   2.表名.字段名使用小写字母或数字,禁止出现数 ...

  8. Redis设计原理简介

    学完MySQL InnoDB之后,又开始学习和研究Redis. 首先介绍下书:<Redis设计与实现>第二版 黄健宏著,机械工业出版社,388页,基于redis3.0版本.版本有点低,这个 ...

  9. iOS 数组遍历过程中移除

    参考:https://blog.csdn.net/u011619283/article/details/53135502 常见crash 原因是数组在移除元素后,继续遍历会有越界问题. 解决思路: 遍 ...

  10. hide handkerchief（hdu2104）

    思考:这种找手绢就是,在判断是否互质.用辗转相除法(用来求最大公约数:a)进行判断.r=a%b;a=b;b=r;循环限制条件:除数b=0是结束除法.如果这时被除数a=1,则表示两个互质. #inclu ...