020_CSS3

Wesley13
• 阅读 295

目录

  • 如何学习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

点赞
收藏
评论区
推荐文章
技术小男生 技术小男生
2个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi /etc/profile2:按字母键i进入编辑模式,在最底部添加内容: JAVAHOME/opt/jdk1.8.0152 CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jar PATH$JAVAHOME/bin:$PATH3:生效配置
光头强的博客 光头强的博客
2个月前
Java面向对象试题
1、 请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。 创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现 接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿 吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
2个月前
css问题
1、 在IOS中图片不显示(给图片加了圆角或者img没有父级) <div<img src""/</div div {width: 20px; height: 20px; borderradius: 20px; overflow: h
blmius blmius
1年前
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:SQL Mode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。 全局s
晴空闲云 晴空闲云
2个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。 盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置 1、virsh edit centos7 找到“memory”和“vcpu”标签,将 <name>centos7</name> <uuid>2220a6d1-a36a-4fbb-8523-e078b3dfe795</uuid>
Stella981 Stella981
1年前
Sass
**嵌套规则 (Nested Rules)** ----------------------- Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器 #main p { color: #00ff00; width: 97%; .redbox {
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序 select * from table_name order id desc; 2.按照指定(多个)字段排序 select * from table_name order id desc,status desc; 3.按照指定字段和规则排序 selec
Stella981 Stella981
1年前
Angular material mat
Icon Icon Name mat-icon code _add\_comment_ add comment icon <mat-icon> add\_comment</mat-icon> _attach\_file_ attach file icon <mat-icon> attach\_file</mat-icon> _attach\
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
#### 背景描述 # Time: 2019-01-24T00:08:14.705724+08:00 # User@Host: **[**] @ [**] Id: ** # Schema: sentrymeta Last_errno: 0 Killed: 0 # Query_time: 0.315758 Lock_
helloworld_34035044 helloworld_34035044
4个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。 uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid() 或 uuid(sep)参数说明:sep 布尔值,生成的uuid中是否包含分隔符'',缺省为