一. 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标签选择器

    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标签

<!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>
    1. 交集选择器 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>
    1. 并集选择器 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>
    1. 子元素选择器 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>
    1. 序列选择器：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>
    1. 相邻兄弟选择器 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>
    1. 普通兄弟选择器 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的更多相关文章

  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. 201771010113-李婷华 实验一 软件工程准备-<软件工程的相关了解>

    项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/xbsf/nwnu2020SE 这个作业要求链接 https://www.cnblogs.com/nwnu- ...

  2. 【FreeRTOS学习01】CubeIDE快速整合FreeRTOS创建第一个任务

    整个专栏主要是博主结合自身对FreeRTOS的实战学习以及源码分析,基于STM32F767 Nucleo-144平台,在CubeIDE下进行开发,结合官方的HAL库,将硬件环节的问题减少到最小,将精力 ...

  3. C# 9.0 新特性预览 - 空参数校验

    C# 9.0 新特性预览 - 空参数校验 前言 随着 .NET 5 发布日期的日益临近,其对应的 C# 新版本已确定为 C# 9.0,其中新增加的特性(或语法糖)也已基本锁定,本系列文章将向大家展示它 ...

  4. 阿里面试居然跟我扯了半小时的CyclicBarrier

    一个大腹便便,穿着格子衬衫的中年男子,拿着一个贴满Logo的Mac向我走来,看着稀少的头发,我心想着肯定是顶级技术大牛吧!但是我也是一个才华横溢的人,稳住我们能赢. 面试官:您好,先做一下自我介绍吧! ...

  5. python语法学习第一天--变量、运算符、数据类型

    变量:计算机中的一块内存,给变量赋值意味着将值存入内存中 python中变量不用类型声明(根据赋的值决定类型),但使用时(创建时)必须赋值(=赋值). 多个变量的赋值: ①a=b=c=1; ②a,b, ...

  6. NOI Online #2 赛后题解

    color 题意 \(\;\) 给定\(p_1,p_2\),要求\(p_1\)的倍数格子填红色,\(p_2\)的倍数格子填蓝色,既是\(p_1\)又是\(p_2\)倍数的格子颜色任选.求是否存在一种填 ...

  7. ql自动化测试之路-概述篇

    前言:本节主要讲解自动化测试的基本概述,包括分层自动化测试.自动化测试中用到的工具.以及关于自动化测试的想法 一.分层自动化测试 上图是经典的测试金字塔.用它来形容目前测试投入的价值是比较适合的,同样 ...

  8. Azure AD B2C（一）初识

    一,引言(上节回顾) 上一节讲到Azure AD的一些基础概念,以及如何运用 Azure AD 包含API资源,Azure AD 是微软提供的云端的身份标识和资源访问服务,帮助员工/用户/管理员访问一 ...

  9. 【雕爷学编程】MicroPython动手做（01）——春节后入手了K210开发板

    Python的开放.简洁.黏合正符合了现发展阶段对人工智能.大数据分析.可视化.各种平台程序协作产生了快速的促进作用.自Python3的发布到现在已有五六年的时间,从刚发布的反对声音到慢慢被接受与喜欢 ...

  10. 读懂这几个关键词，你就能了解 Docker 啦

    基于高度虚拟化所诞生的容器技术,如今已经走向大规模应用.那么容器.虚拟机.Docker.Openstack.Kubernetes 之间又有什么关系,对现在的选择有什么影响呢? 上世纪 60 年代,计算 ...