020_CSS3

Wesley13
• 阅读 594

目录

  • 如何学习CSS
  • 什么是CSS
  • 发展史
  • 快速入门
  • css的优势
  • 三种CSS导入方式
    • 拓展:外部样式两种写法
  • 选择器
    • 基本选择器
    • 层次选择器
    • 结构伪类选择器
    • 属性选择器
  • 美化网页元素
    • 为什么要美化网页
    • span标签:需要重点突出的文字,使用span套起来,单独设置样式
    • 字体样式
    • 文本样式
    • 超链接伪类和阴影
    • 列表样式
    • 背景
    • 渐变
  • 盒子模型
    • 什么是盒子模型
    • 边框
    • 内外边距
    • 圆角边框
    • 阴影
  • 浮动
    • display
    • float
    • 父级边框塌陷的问题
  • 定位
    • 相对定位-相对于自己原来的位置进行偏移
    • 绝对定位-相对于父级或浏览器进行偏移
    • 固定定位-fixed
    • z-index
  • CSS3动画
  • 总结

如何学习CSS

  1. CSS是什么
  2. CSS怎么用(快速入门)
  3. CSS选择器(重点)
  4. 美化网页(文字,阴影,超链接,列表,渐变......)
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画(特效效果)

什么是CSS

  1. Cascading Style Sheet 层叠样式表
  2. CSS 表现(美化网页)
  3. 字体,颜色,边距,宽度,高度,背景图片,网页定位,网页浮动……

发展史

  1. CSS1.0
  2. CSS2.0 div+css,HTML与CSS结构分离的思想,网页变得简单,利于SEO(搜索引擎优化)
  3. CSS2.1 浮动,定位
  4. CSS3.0 圆角,阴影,动画……需要考虑浏览器兼容

快速入门

  1. 第一种方式:style标签中写css代码;

    Title

    武侠世界

  2. 第二种方式:写css文件,HTML页面引入css文件;(建议使用)

    Title

    武侠世界

    h1{ color:red;}

css的优势

  1. 内容和表现分离
  2. 网页结构表现统一,可以实现复用
  3. 样式十分的丰富
  4. 利于SEO,容易被搜索引擎收录

三种CSS导入方式

  1. 行内样式

  2. 内部样式

  3. 外部样式

  4. 优先级:就近原则,行内样式最优先,内部样式和外部样式看谁近

    Title

    武侠世界

    h1{ color:red;}

拓展:外部样式两种写法

  1. 链接式

  2. 导入式:@import是CSS2.1特有的

选择器

基本选择器

  1. 标签选择器:选择同一类型的标签 标签{}

  2. 类选择器:选择同一class属性的标签 .class名{}

  3. id选择器:全局唯一 #id名{}

  4. 优先级:id选择器>类选择器>标签选择器

    1.标签选择器

    武侠世界

    武侠世界

    流星蝴蝶剑

    2.类选择器

    九阳真经

    九阴真经

    太极拳

    降龙十八掌

    3.id选择器

    九阳真经

层次选择器

  1. 后代选择器 body p{}

  2. 子选择器 body>p{}

  3. 相邻弟选择器:只有一个,相邻向下 .active+p{}

  4. 通用弟选择器,向下的所有兄弟元素 .active~p{}

    4.层次选择器

    p1

    p2

    p3

    • p4

    • p5

    • p6

020_CSS3

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>4.层次选择器</title> <style>  /*后代选择器:包括所有后代,子,孙……*/  /*body p{*/   /*background: #cf8ab1;*/  /*}*/  /*子选择器*/  body>p{   background: #cf8ab1;  } </style></head><body> <p>p1</p> <p>p2</p> <p>p3</p> <ul>  <li>   <p>p4</p>  </li>  <li>   <p>p5</p>  </li>  <li>   <p>p6</p>  </li> </ul></body></html>

020_CSS3

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>4.层次选择器</title> <style>  /*后代选择器:包括所有后代,子,孙……*/  /*body p{*/   /*background: #cf8ab1;*/  /*}*/  /*子选择器*/  /*body>p{*/   /*background: #cf8ab1;*/  /*}*/  /*相邻弟选择器,只有一个,并且相邻向下*/  .active+p{   background: #cf8ab1;  } </style></head><body> <p>p1</p> <p >p2</p> <p>p3</p> <ul>  <li>   <p>p4</p>  </li>  <li>   <p>p5</p>  </li>  <li>   <p>p6</p>  </li> </ul></body></html>

020_CSS3

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>4.层次选择器</title> <style>  /*后代选择器:包括所有后代,子,孙……*/  /*body p{*/   /*background: #cf8ab1;*/  /*}*/  /*子选择器*/  /*body>p{*/   /*background: #cf8ab1;*/  /*}*/  /*相邻弟选择器,只有一个,并且相邻向下*/  /*.active+p{*/   /*background: #cf8ab1;*/  /*}*/  /*通用弟选择器,向下的所有兄弟元素*/  .active~p{   background: #cf8ab1;  } </style></head><body> <p>p1</p> <p >p2</p> <p>p3</p> <p>p4</p> <p>p5</p> <ul>  <li>   <p>p4</p>  </li>  <li>   <p>p5</p>  </li>  <li>   <p>p6</p>  </li> </ul> <p>p6</p> <p>p7</p></body></html>

020_CSS3

结构伪类选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>5.结构伪类选择器</title> <style>  /*ul的第一个子元素*/  ul li:first-child{   background: #cf8ab1;  }  /*ul的最后一个子元素*/  ul li:last-child{   background: aqua;  }  /*选择当前p元素的父级元素的第一个子元素,并且是p元素才生效*/  p:nth-child(1){   background: antiquewhite;  }  p:nth-child(2){   background: antiquewhite;  }  /*选择当前p元素的父级元素的第二个p子元素*/  p:nth-of-type(2){   background: aquamarine;  }  /*鼠标悬停效果*/  a:hover{   background: black;  } </style></head><body> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p> <p>p4</p> <p>p5</p> <ul>  <li>li1</li>  <li>li2</li>  <li>li3</li> </ul> <p>p6</p> <p>p7</p> <a href="">a标签</a></body></html>

020_CSS3

属性选择器

  1. "value 是完整单词" 类型的比较符号: ~=|=

  2. "拼接字符串" 类型的比较符号: *=^=$=

  3. [attribute~=value] 属性中包含独立的单词为 value

  4. [attribute*=value] 属性中做字符串拆分,只要能拆出来 value 这个词就行

  5. [attribute|=value] 属性中必须是完整且唯一的单词,或者以 - 分隔开

  6. attribute^=value] 属性的前几个字母是 value 就可以

  7. [attribute$=value] 属性的后几个字母是 value 就可以

    6.属性选择器

    1 2 3 4 5 6 7 8

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
2星期前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
2年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
6个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这