1.CSS（层叠样式表）

2.CSS语法

　　　　选择器{

　　　　　　　　属性名1：属性值1；

　　　　　　　　属性名2：属性值2；

　　　　　}

3.引用CSS的三种方式

　　　　第一种：行内样式

　　　　　　　　例：<a style="color:red;">内部样式</a>

　　　　第二种：内部样式

　　　　　　　　在head标签中，写入style标签.

　　　　　　　　例：

　　　　　　　　　　<head>

　　　　　　　　　　　　　　.......

　　　　　　　　　　　　　　<style type="text/css">

　　　　　　　　　　　　　　　　　　h1{

　　　　　　　　　　　　　　　　　　　　.........

　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　</style>

　　　　　　　　　　</head>

　　　　第三种：外部样式

　　　　　　　　使用步骤：

　　　　　　　　　　　　a)创建一个以.css为后缀的文件(css文件)

　　　　　　　　　　　　b)在html中通过link引入css文件

　　　　　　　　　　　　　　　　<link rel="stylesheet" href="css文件路径"/>

4.基本选择器

　　　　4.1 标签选择器

　　　　　　　　标签名{}

　　　　4.2 类选择器

　　　　　　　　.class属性值{}

　　　　4.3 id选择器

　　　　　　　　#id属性值{}

5.层次选择器

　　　　5.1 后代选择器

　　　　　　　　父元素 子元素{}

　　　　5.2 子选择器

　　　　　　　　父元素>子元素{}

　　　　5.3 相邻兄弟选择器

　　　　　　　本元素+相邻兄弟元素{}

　　　　5.4 通用兄弟选择器

　　　　　　　本元素~兄弟元素{}

6.结构伪类选择器

　　　　E F:first-child{} 　　　//第一个子元素

　　　　E F:last-child{} 　　　//最后一个子元素

　　　　E F:nth-child(?){} 　　// ?表示第几个子元素,还可以使odd奇数，even偶数

　　　　E F:first-of-type{}　　//指定类型的第一个元素

　　　　E F:last-of-type{}　　//指定类型的最后一个元素

　　　　E F:nth-of-type(?){}   //?表示指定类型第几个子元素

注意:

　　　　E F:nth-child(n)在父级里从一个元素开始查找，不分类型.

　　　　E F:nth-of-type(n)在父级里先看类型，再看位置.

7. 属性选择器

　　　　E[attr] //具有属性attr的元素

　　　　E[attr=val] //属性attr的值是val的元素

　　　　E[attr^=val] //属性attr的值以val开头的元素

　　　　E[attr$=val] //属性attr的值以val结尾的元素

　　　　E[attr*=val] //属性attr的值包含val的元素

第四章css初识的更多相关文章

  1. web—第四章css&第五章

     web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个cs ...

  2. 第四章 CSS基础

    1.CSS是cascading style sheets 层叠样式表.样式定义如何显示html元素,通常存储在样式表中,将样式添加到html中,是为了解决内容与表现分离的问题. 2.外部样式表可以极大 ...

  3. 第四章：初识CSS3

    1.CSS规则由两部分构成,即选择器和声明器 声明必须放在{}中并且声明可以是一条或者多条 每条声明由一个属性和值构成,属性和值用冒号分开,每条语句用英文冒号分开 注意: css的最后一条声明,用以结 ...

  4. [CSS]《CSS揭秘》第四章——视觉效果

    投影 单侧投影 box-shadow:0px 10px 10px -5px black; 邻边投影 box-shadow:10px 10px 10px 2px black; 双侧投影 box-shad ...

  5. 《Django By Example》第四章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...

  6. 《深入理解bootstrap》读书笔记：第4章 CSS组件（下）

    十. 标签(.label类,label-xxx) 高亮一些标题部分. 1 2 3 4 5 6 <h1>HELLO<span class="label label-defau ...

  7. 第四章SignalR自托管主机

    第四章SignalR自托管主机 SignalR服务器通常在IIS的Asp.Net应用程序上承载,但它也可以使用自托管库来作为自托管的主机来运行(就像控制台应用程序或Windows服务那样)与Signa ...

  8. Knockout应用开发指南 第四章：模板绑定

    原文:Knockout应用开发指南 第四章:模板绑定 模板绑定The template binding 目的 template绑定通过模板将数据render到页面.模板绑定对于构建嵌套结构的页面非常方 ...

  9. JavaScript DOM编程艺术-学习笔记（第三章、第四章）

    第三章: 1.js的对象分为三种:①用户自定义对象 ② 内建对象(js提供的对象) ③宿主对象(js寄宿的环境-浏览器,提供的对象) 2.文档是由节点组成的集合,即dom树,html元素是根元素,是唯 ...

随机推荐

  1. 从头推导与实现 BP 网络

    从头推导与实现 BP 网络 回归模型 目标 学习 \(y = 2x\) 模型 单隐层.单节点的 BP 神经网络 策略 Mean Square Error 均方误差 \[ MSE = \frac{1}{ ...

  2. linux install Openvino

    recommend centos7 github Openvino tooltiks 1. download openvino addational installation for ncs2 ncs ...

  3. 详解ASP.NET Core API 的Get和Post请求使用方式

    上一篇文章帮助大家解决问题不彻底导致博友使用的时候还是遇到一些问题,欢迎一起讨论.所以下面重点详细讲解我们常用的Get和Post请求( 以.net core2.2的Http[Verb]为方向 ,推荐该 ...

  4. Git初识学习

    初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 使用命令git add <file>,注意,可反复多次使用,添加多个文件: 使用命令git commit ...

  5. Class.jsp

    <%@page import="java.util.Random"%> <%@ page language="java" contentTyp ...

  6. Python玩转Arduino——简单介绍

    关于Python语言的介绍安装请参考廖雪峰的Python教程 Python是一门解释型语言,虽然不能够像c语言一样编译上传到Arduino--什么你说MicroPython,我们再说Arduino呢- ...

  7. Linux系统安装笔记

    1.下载CentOS系统镜像: 很多资料都是CentOS6的,7的比较少,所以我决定还是用CentOS6来学习. 地址:http://vault.centos.org/6.8/isos/x86_64/ ...

  8. C语言的三目运算符

    语法: 表达式1 ? 表达式2 : 表达式3; 等价于 if(表达式1) { 表达式2 } else { 表达式3 }

  9. 关于python 的http 日常操作

    Http,互联网的基础 .net ,java(springboot),node.js,python 都能非常方便的实现http服务. 现在服务器后台跑着pytorch的模型,想着还是用python来处 ...

  10. 别让持续交付自动化交付bug

    你的连续交付能力用得还好吗,比如频繁发布移动或云应用的特性增强?还是恰好相反,快速发布了带漏洞的版本? - Joel Shore 连续交付能让交付流程跑得更快,但连续交付本身并不能为发布质量打包票.国 ...