css_css布局 - CSDN
css 订阅
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]  CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 [2] 展开全文
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]  CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 [2]
信息
外文名
Cascading Style Sheets
外语缩写
CSS(也作文件扩展名)
中文名
层叠样式表
其他称呼
级联样式表
CSS发展历程
1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。 [3]  从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯(Bert Bos)正在设计一个名为Argo的浏览器,于是他们决定一起设计CSS。其实当时在互联网界已经有过一些统一样式表语言的建议了,但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中,一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式,在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合每个人的爱好。哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议,1995年的www网络会议上CSS又一次被提出,博斯演示了Argo浏览器支持CSS的例子,哈肯也展示了支持CSS的Arena浏览器。同年,W3C组织(World WideWeb Consortium)成立,CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准,层叠样式表的开发终于走上正轨。有越来越多的成员参与其中,例如微软公司的托马斯·莱尔顿(Thomas Reaxdon),他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底,CSS初稿已经完成,同年12月,层叠样式表的第一份正式标准(Cascading style Sheets Level 1)完成,成为w3c的推荐标准。1997年初,W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。 [4-5] 
收起全文
  • CSS-基础篇

    千次阅读 多人点赞 2020-08-17 17:51:11
    CSS基础部分自学笔记 内联样式 也称行内或行间样式,是在html标签上添加style属性来实现的 内部样式 在<style></style>标签内添加的样式,内部样式的代码可以复用、符合W3C标准,尽量让结构和样式分开...

    CSS基础部分自学笔记


    内联样式

    也称行内或行间样式,是在html标签上添加style属性来实现的


    内部样式

    <style></style>标签内添加的样式,内部样式的代码可以复用、符合W3C标准,尽量让结构和样式分开处理


    外部样式

    • <link rel="stylesheet" href="">
      rel:指定资源跟页面的关系
      href:资源的地址
    • @import url(./common.css);
      这种方式有很多问题,不建议使用

    颜色表示法

    • 单词表示法
    • 十六进制表示法
    • RGB三原色表示法(范围0-255)

    CSS背景样式

    background-color:背景颜色
    background-image:背景图片(URL背景地址,默认水平垂直都铺满背景图)
    background-repeat:背景图片的平铺方式(repeat-x、repeat-y、repeat、no-repeat)
    background-positon:背景图片位置(x y)=>(数字[px/%] | 单词[x:left/center/right],[y:top/center/bottom])
    background-attachment:背景图随滚动条的移动方式(scroll默认值,背景位置是按当前元素进行偏移的;fixed背景位置是按照浏览器进行偏移的)
    复合样式:background:red url() repeat 0 0;(颜色 背景图 平铺方式 位置)


    CSS边框样式

    border-style:边框样式(solid实线、dashed虚线、dotted点线…)
    border-width:边框大小(px)
    border-color:边框颜色
    【注】可单独对一个边框进行设置(border-top/right/bottom/left-)

    //利用CSS边框实现三角形
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
          div {
            width: 0px;
            height: 0px;
            border-top-color: transparent;
            border-top-style: solid;
            border-top-width: 30px;
            border-right-color: red;
            border-right-style: solid;
            border-right-width: 30px;
            border-bottom-color: transparent;
            border-bottom-style: solid;
            border-bottom-width: 30px;
            border-left-color: transparent;
            border-left-style: solid;
            border-left-width: 30px;
          }
        </style>
      </head>
      <body>
        <div></div>
      </body>
    </html>
    

    复合样式:border:1px red solid;(边框大小 颜色 样式)对单个边也可以用


    CSS文字样式

    font-family:字体类型

    • 设置多字体方式(使其能够适应更多的计算机和设备)
    • 引号的问题(有的字体中间有空格,必须用引号引起来)

    font-size:字体大小(默认大小16px),字体大小一般为偶数

    属性取值 字体大小
    xx-small 最小
    x-small 较小
    small
    medium 正常(默认值)
    large
    x-large 较大
    xx-large 最大

    font-weight:字体粗细(单词[normal正常、bold加粗]; 数字[100-500正常、600-900加粗])
    font-style:字体样式(normal正常、italic斜体[italic所有带有倾斜字体的可以设置;oblique没有倾斜属性的字体也可以设置倾斜])
    color:字体颜色
    复合样式:font:weight style size familyfont:style weight size familyfont:weight style size/line-height family


    CSS段落样式

    text-decoration:文本修饰(underline下划线、line-through删除线、overline上划线、none不添加任何修饰),可添加多个修饰,用空格隔开
    text-transform:文本大小写(针对英文段落,lowercase小写、uppercase大写、capitalize首字母大写)
    text-indent:文本缩进(首行缩进font-size的两倍,或2em[em相对单位,永远跟一个字体设置的大小相同)
    text-align:文本对齐方式(left默认、right、center、justify[两端点对齐,中间自行调节])
    line-height:定义行高(不是固定值,根据当前字体的大小变化,用数字+px或scale[相对于原来字体的比例]表示)
    letter-spacing:定义字间距
    word-spacing:定义词间距(针对英文)
    强制折行

    • word-break:break-all; 非常强烈的折行
    • word-wrap:break-word; 不是那么强烈的折行

    CSS选择器

    • ID选择器

    css:#elem{}
    html:id=“elem”
    【注】1.在一个页面中,ID值是唯一的
    2.命名规范,字母 _ - 数字 (命名的第一位不能是数字)
    3.命名方式:驼峰式(小驼峰、大驼峰)、下划线式、短线式

    • CLASS选择器

    css:elem{}
    html:class=“elem”
    【注】1.class选择器是可以复用的
    2.可以添加多个class样式
    3.多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序
    4.标签+类的写法

    • 标签选择器

    css:div{}
    html:<div></div>

    • 群组选择器/分组选择器
      css:div,p,span{}
    • 通配选择器

    *{}
    尽量避免使用通配选择器,因为会给所有的标签添加样式

    • 层次选择器

    后代:M N{}
    父子:M > N{}
    兄弟:M ~ N{} 当前M下面的所有兄弟N标签
    相邻:M + N{} 当前M相邻的N标签

    • 属性选择器

    div[class]{}
    div[class][id]{}
    div[class=box]{}
    div[class*=search]{} //只要search在class中出现过都可以选中
    =:完全匹配 *=:部分匹配 ^=:起始匹配 $=:结束匹配

    • 伪类选择器

    css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加。
    :link 访问前的样式(只能给a标签)
    :visited 访问后的样式(只能给a标签)
    :hover 鼠标移入时的样式(可以给所有标签)
    :active 鼠标按下时的样式(可以给所有标签)
    如果四个伪类都生效,顺序为:L V H A

    • 伪元素选择器

    div:after{content: ;color: }
    div:before{content: }
    :checked、:disabled、:focus 都是针对表单元素

    • 结构性伪类选择器

    :nth-of-type(){}、:nth-child(){} 角标从1开始,n值表示从0到无穷大即都被选中,隔行换色(2n)(2n+1)
    选中第一项 :first-of-type{} :first-child{}
    选中最后一项 :last-of-type{} :last-chile{}
    只有一项的时候被选中 only-of-type{}
    【注】type和child的区别:type看孩子类别,child不区别孩子类别


    CSS样式继承

    文字相关的样式可以被继承
    布局相关的样式不能被继承(默认不继承,可以使用inherit值让其继承)


    CSS优先级

    • 相同样式优先级
      当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况
    • 内部样式与外部样式
      内部样式与外部样式优先级相同,如果都设置了相同的样式,那么后写的引入方式优先级高
    • 单一样式优先级
      style行间(权重1000)> id(权重100) > class(权重10)> tag(权重1)> 继承
    • !important(不能针对继承的属性进行优先级的提升)
      提升样式优先级,非规范方式,不建议使用 #elem{color:red !important;}
    • 标签+类与单类
      标签+类 > 单类
    • 群组优先级
      群组选择器与单一选择器的优先级相同,靠后写的优先级高
    • 层次优先级
      权重比较、约分比较

    CSS盒子模型

    在这里插入图片描述

    padding/border/margin
    只写一个值:上右下左
    写两个值:上下、左右
    写三个值:上、左右、下
    写四个值:上、右、下、左
    1.背景颜色会填充到margin以内的区域(不包括margin区域)
    2.文字会在content区域
    3.padding不会出现负值,margin是可以出现负值的
    box-sizing(盒尺寸,可以改变盒子模型的展示形态)[content-box]/[border-box]
    使用场景:1.不用再去计算一些值
    2.解决一些百分比的问题input{width:100%;padding:30px;box-sizing:border-box;}
    margin叠加
    当给两个盒子同时添加上下外边距的时候,就会出现叠加的问题(取两者中大的值作为叠加值),只有上下有,左右没有
    解决方案:
    1.BFC规范
    2.想办法只给一个元素添加间距
    margin传递
    传递问题只会出现在嵌套的结构中,且只有margin-top会有传递的问题,其它三个方向没有传递问题
    解决方案:
    1.BFC规范
    2.给父容器加边框
    3.margin换成padding(加给父元素,padding-top: ;并进行调整)
    margin自适应居中(只可以左右,不可以上下)
    margin-left:auto;margin-right:auto;居中
    一般写法:margin:0 auto;(margin:auto auto;)


    标签分类

    布局一般用块标签,修饰文本一般用内联标签

    按类型:
    block:块 div p ul li h1…
    独占一行;支持css中所有的样式;不写宽时,和父元素宽相同;所占区域是一个矩形
    inline:内联 span a em strong img…
    挨在一起;有些样式不支持(宽、高、margin、padding的某些);不写宽时,宽度由内容决定;所占区域不一定是矩形;内联标签之间会有空隙(换行产生),解决,找到两个内联的父元素:font-size:0;然后两个内联在设置font-size;16px;空隙消失
    inline-block:内联块 input select…
    挨在一起,支持宽高


    显示框类型

    display:block/inline/inline-block/none(让指定标签隐藏)
    disp:none不占空间的隐藏;visibility:hidden占空间的隐藏


    标签嵌套规范

    块标签可以嵌套内联标签
    块标签不一定能嵌套块标签
    内联标签不能嵌套块标签


    溢出隐藏

    overflow:visible(默认)/ hidden / scroll(有滚动条)/ auto(内容多的时候有滚动,内容少的时候没有)
    overflow-x、overflow-y:针对x、y分别设置


    透明度与手势

    opacity
    0(透明)~ 1(不透明)0.5
    rgba( , , ,0.5) 最后一个为透明度,只针对背景,不针对文字,可以让指定样式透明,不改变其他样式
    cursor 手势
    default:默认透明
    自定义鼠标样式:pointer(手型)、move(十字米可移动的样式)、help(箭头带问号)
    自定义,准备图片 .cur .ico的才可以,`cursor:url(),auto;


    最大、最小宽高

    min-width、max-width
    min-height、max-height
    一个容器怎么适应屏幕的高:

    html,body{height:100%}
    .contrainer(height:100%}
    

    CSS的默认样式

    没有默认样式:div、span、…
    有默认样式:
    body(margin:8px)、h1(margin:上下16px)-h6、p、ul(margin:上下16px padding:左40px 默认点:list-style:disc)、a(text-decoration:underline)…


    CSS重置样式

    *{margin:0;padding:0;}
    ul{list-style:none;}
    a{text-decoration:none;color:#666;}
    img{display:block;}
    

    图片和容器底部有一些空隙

    • vertical-align:baseline;基线对齐 ==> vertical-aglin:bottom;底线对齐
    • display:block; //推荐
    展开全文
  • HTML+CSS初级入门

    万人学习 2019-06-24 13:10:24
    本课程主要目标是教给大家: 1)HTML和CSS能干什么? 2)HTML和CSS是什么?...3)HTML和CSS怎么用,这里会讲解常用到的HTML和CSS的使用规则 4)一步一步开发一个响应式的页面 QQ交流群:659123270
  • 10个超漂亮的CSS 3D特效

    万次阅读 多人点赞 2018-08-11 09:26:55
    在油管上看到了10个超漂亮的CSS 3D特效,遂分享给大家,有写是css+JavaScript实现的。 3D Slicebox 在3D立方体上寻找图像幻灯片?查看演示 图像转换 与THREE.js 结合使用- 此图片幻灯片将让您的访问者惊呆了...

    在油管上看到了10个超漂亮的CSS 3D特效,遂分享给大家,有写是css+JavaScript实现的。

    3D Slicebox

    在3D立方体上寻找图像幻灯片?查看演示

    图像转换

    THREE.js 结合使用- 此图片幻灯片将让您的访问者惊呆了。你不能错过这一个,相信我!查看演示

    3D条形图

    将无聊的平面2D图表转换为3D图表。查看现场演示,点击下面的图片获取源代码。查看演示

    3D导航栏

    再次在您网站顶部的水平导航栏?试试这个吧!查看演示

    3D动画图表

    更改数据时包含动画的3D图表。查看演示

    纯CSS进度条

    忘记旧的普通2D进度条并检查这个纯CSS 3D进度条。查看演示

    CSS Helix加载器

    适合您网站的加载动画,可以让用户长时间保持关注。查看演示

    3D盒子预览器

    将相关内容分组到一个框中并将鼠标悬停在预览中!查看演示

     

    3D翻转预览器

    为您的元素添加悬停效果的完美匹配。查看演示

    3D 404错误

    用旋转的3D元素替换旧的无聊404错误页面。查看演示

    展开全文
  • HTML&CSS;实战教程

    万人学习 2019-06-24 13:37:28
    创建标准网页的初学者指南,也适合深入学习Html,CSS的同学,后面课程有深入的讲解,本课程会初级介绍Html和CSS,让你从入门到精通轻松掌握Web开发语言,从元素标签到CSS样式每个部分都详细进行了介绍和讲解,讲解了...
  • 细说CSS(CSS+CSS3)

    千人学习 2019-12-18 15:11:02
    本课程包含7章45个小节课程,内容涵盖:CSS基础、CSS选择器、CSS属性和属性值、CSS 边框和背景、CSS盒子模型、文本样式等。
  • Day 47 CSS与它的选择器

    2020-09-16 17:05:54
    Day 47 CSS与它的选择器 什么是CSS CSS全称Cascading Style Sheet 层叠样式表,是专门用来为HTML标签添加样式的。 样式指的是HTML标签的显示效果,比如换行、宽高、颜色等等 层叠属于CSS的三大特征之一,我们将在...

    Day 47 CSS与它的选择器

    什么是CSS

    CSS全称Cascading Style Sheet 层叠样式表,是专门用来为HTML标签添加样式的。

    样式指的是HTML标签的显示效果,比如换行、宽高、颜色等等

    层叠属于CSS的三大特征之一,我们将在后续内容中介绍

    指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里

    为什么要用CSS呢

    单独使用HTML标签时候容易造成

    1. 记忆困难:需要记忆每个标签的所有样式相关属性,如果标签没有某个样式相关属性,那么设置了也没有效果
    2. 代码耦合度高:HTML语义与样式耦合在一起
    3. 扩展性差:当某一类样式需要修改时,我们需要找到所有设置了该样式标签进行修改

    CSS应运而生,很好的解决了以上三个问题

    如何使用CSS

    CSS语法可以分为两部分

    • 选择器
    • 声明

    声明由属性和值组成,多个声明之间用分号隔开

    CSS的四种引入方式

    • 内联式

      行内式是在标签的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用

      <p style="color: #6485ff;font-size: 50px" >我是你爸爸</p>
      <hr>
      <p>我是你爸爸</p>
      <hr>
      <p>我是你爸爸</p>
      
    • 嵌入式

      嵌入式是将CSS样式集中写在网页标签内的的标签对中。

          <!-- 嵌入式 -->
          <style>
              p {
                  color: pink;
                  font-size: 60px;
              }
          </style>
      
    • 导入式

      <head>
          <style>
              /*形式一:*/
              /*@import "css/mystyle.css";*/
              /*形式二:*/
              @import url("css/mystyle.css");
          </style>
      </head>
      
    • 外联式(企业开发中使用这种方式)

      <link rel="stylesheet" href="css/p的css.css">
      
      # p的css
      p3 {
          color: greenyellow;
          font-size: 20px;
      }
      

    导入式与链接式的区别:

    1、标签属于XHTML,@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的
    2、导入式的缺点
    导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷,用户体验差。
    3、链接式的优点
    使用链接式时与导入式不同的是它会在网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。

    注意点

    1、style标签必须放到head内 ,type="text/css"代表文本类型的css
    2、type属性其实可以不用写,默认就是type=“text/css”
    3、设置样式时必须按照固定的格式来设置,key:value;
    其中 ; 不能省略,最后一个属性其实可以省略,但我们可以简单地统一记成不 能省略就行了

    CSS选择器

    基本选择器

    1、id选择器

    作用:根据指定的id名称,在当前界面中找到对应的==唯一一个==标签,然后设置属性

    格式:

    id="名称" {
    		属性:;
    }
    

    注意点:

    • 在企业开发中如果仅仅只是为了设置样式,通常不会使用id,在前端开发中id通常是留给js使用的
    • 每个标签都可以设置唯一一个id,id就相当于人/标签的身份证,因此在同一界面内id绝不能重复
    • 引用id一定要加#
    • id的命名只能由字符、数字、下划线组成,且不能以数字开头,更不能是html关键字如p,a,img等

    2、类选择器

    **作用:**根据指定的类的名称,在当前界面中==找到对应的==标签,然后设置属性

    格式:

    .class="名称" {
    		属性:;
    }
    

    注意点:

    • 类名就是专门用来给某个特定的标签设置样式的
    • 每个标签都可以设置一个或多个class(空格分隔),class就相当于人/标签的名称,因此同一界面内class可以重复
    • 引用class一定要加点.
    • 类名的命名规则与id的命名规则相同

    3、标签选择器

    **作用:**根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性

    格式:

    标签 {
    		属性:;
    }
    

    注意点:

    • 只要是HTML的标签都能当做标签选择器
    • 标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签
    • 标签选择器,无论嵌套多少层都能选中

    4、通配符选择器

    **作用:**选择所有标签

    格式:

    * {
    		属性:;
    }
    

    注意点:

    • 在企业开发中一般不会使用通配符选择器
      • 由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签如果当前界面上的标签比较多,那么性能就会比较差

    组合选择器

    1、后代选择器

    **作用:**找到指定标签的所有后代(儿子,孙子,重孙子、、、)标签,设置属性,也就是标签内所有符合内容的子标签

    格式:

    标签名1 xxx {
    		属性:;
    }
    

    注意点:

    • 后代选择器必须用空格隔开
    • 后代不仅仅是儿子,也包括孙子、重孙子
    • 后代选择器不仅仅可以使用标签名称,还可以使用其他选择器比如id或class
    • 后代选择器可以通过空格一直延续下去

    2、子元素选择器

    **作用:**找到制定标签的所有特定的直接子元素,然后设置属性

    格式:

    标签名1>标签名2 {
    		属性:;
    }
    先找到名称叫做"标签名称1"的标签,然后在这个标签中查找所有直接元素名称叫做"标签名称2"的元素
    

    注意点:

    • 子元素选择器之间需要用>符号链接,并且不能有空格----比如div >p会找div标签的所有后代标签,标签名为">p"
    • 子元素选择器只会查找儿子,不会查找其他嵌套的标签
    • 子元素选择器不仅可以用标签名称,还可以使用其他选择器,比如id或class
    • 子元素选择器可以通过>符号一直延续下去

    3、毗邻选择器,CSS2推出(相邻兄弟选择器)

    **作用:**选定紧跟其后的那一个标签

    格式:

    选择器1>选择器2 {
    		属性:;
    }
    

    注意点:

    • 毗邻选择器必须通过+号链接
    • 毗邻选择器只能选中紧跟其后的那个标签,不能选中被隔开的标签
    div+p {
                color: #0187ba;
                font-size: 30px;
            }
            
    <div>
        <p>黑暗森林</p>
        <p>精灵意志</p>
        <p>萤火意志</p>
    </div>
    <p>哈利波特</p>  # 只有这个被选中
    <p>魔戒</p>        
    

    4、兄弟选择器

    **作用:**给指定选择器后面的所有选择器中的所有标签设置属性

    格式:

    选择器1~选择器2 {
    		属性:;
    }
    

    注意点:

    • 通用兄弟选择器必须通过~号链接
    • 通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签无论有没有被隔开,都可以被选中
    div~p{
                color: #ff9033;
                font-size: 15px;
            }
            
            
    <div>
        <p>黑暗森林</p>
        <p>精灵意志</p>
        <p>萤火意志</p>
    </div>
    <p>哈利波特</p>  # 全部被修改
    <p>魔戒</p>
    <p>星球大战</p>
    <p>阿凡达</p>              
    

    交集选择器与并集选择器

    1、交集选择器(不常用)

    **作用:**给所有选择器选中的标签中,相交的那部分标签设置属性

    格式:

    选择器1选择器2 {
    		属性:;
    }
    

    注意点:

    • 选择器与选择器之间没有任何链接符号
    • 选择器可以使用标签名称、id、class
    • 交集选择器在企业开发中并不多见,了解即可
      因为:p.part1 完全可以用.part1取代

    2、并集选择器

    **作用:**给所有满足条件的标签设置属性

    格式:

    选择器1,选择器2 {
    		属性:;
    }
    

    注意点:

    • 选择器与选择器之间必须用逗号,来链接
    • 选择器可以使用标签名称、id、class

    序列选择器

    **作用:**css3中新推出的选择器中,最具代表性的的9个,又称为序列选择器,过去的选择器中要选中某个必须加id或class,学习了这9个后,不用加id或class,想选中同级别的第几个就选第几个

    格式:

    #2.1 同级别
    :first-child    p:first-child    同级别的第一个
    :last-child    p:last-child    同级别的最后一个
    :nth-child(n)                    同级别的第n个
    :nth-last-child(n)            同级别的倒数第n个
    
    #2.2 同级别同类型
    :first-of-type                    同级别同类型的第一个
    :last-of-type                    同级别同类型的最后一个
    :nth-of-type(n)                    同级别同类型的第n个
    :nth-last-of-type(n)            同级别同类型的倒数第n个
    
    #2.3 其他
    :only-of-type                    同类型的唯一一个
    :only-child                         同级别的唯一一个
    
    <style>
        p:first-child{
            color:cornflowerblue;
            font-size: 30px;
            }
        p:last-child{
            color: #0187ba;
            font-size: 40px;
            }
        p:nth-of-type(3){
            color: goldenrod;
            font-size: 25px;
            }
        p:nth-last-of-type(4){
            color: red;
            font-size: 50px;
            }
        p:nth-child(2){
             color: #ff9033;
             font-size: 15px;
            }
    </style>
    

    属性选择器

    **作用:**根据指定的属性名称找到对应的标签,然后设置属性 该选择器,最常用于input标签

    格式与具体用法:

        [属性名]
        其他选择器[属性名]
        [属性名=值]
        [属性名^=值]
        [属性名$=值]
        [属性名*=值]
    
    
        例1:找到所有包含id属性的标签
            [id]
        
        例2:找到所有包含id属性的p标签
            p[id]
        
        例3:找到所有class属性值为part1的p标签
            p[class="part1"]
        
        例4:找到所有href属性值以https开头的a标签
            a[href^="https"]
            
        例5:找到所有src属性值以png结果的img标签
            img[src$="png"]
            
        例6:找到所有class属性值中包含part2的标签
            [class*="part"] 
    

    伪类选择器

    **作用:**常用的几种位列选择器。

    格式:

    #1.1 没有访问时的超链接a标签样式:
    a:link {
      color: blue;
    }
    
    #1.2 访问过的超链接a标签样式:
    a:visited {
      color: gray;
    }
    
    #1.3 鼠标悬浮在元素上应用样式:
    a:hover {
      background-color: #eee; 
    }
    
    #1.4 鼠标点击瞬间的样式:
    a:active {
      color: green;
    }
    
    #1.5 input输入框获取焦点时样式:
    input:focus {
      outline: none;
      background-color: #eee;
    }
    

    注意:

    • a标签的伪类选择器可以单独出现,也可以一起出现
    • a标签的伪类选择器如果一起出现,有严格的顺序要求,否则失效link,visited,hover,active
    • hover是所有其他标签都可以使用的
    • focus只给input标签使用

    伪元素选择器

    #1、常用的伪元素。
    #1.1 first-letter:杂志类文章首字母样式调整
    例如:
    p:first-letter {
      font-size: 48px;
    }
    
    #1.2 before
    用于在元素的内容前面插入新内容。
    例如:
    
    p:before {
      content: "*";
      color: red;
    }
    在所有p标签的内容前面加上一个红色的*。
    
    #1.3 after
    用于在元素的内容后面插入新内容。
    例如:
    
    p:after {
      content: "?";
      color: red;
    }
    在所有p标签的内容后面加上一个蓝色的?。
    

    CSS三大特征

    1、继承性

    定义:

    给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性

    注意:
    1、只有以color、font-、text-、line-开头的属性才可以继承
    2、a标签的文字颜色和下划线是不能继承别人的
    3、h标签的文字大小是不能继承别人的,会变大,但是会在原来字体大小的基础上变大
    ps:打开浏览器审查元素可以看到一些inherited from。。。的属性
    应用场景:
    通常基于继承性统一设置网页的文字颜色,字体,文字大小等样式

    2、层叠性

    定义:

    CSS全称:Cascading StyleSheet层叠样式表,层叠性指的就是CSS处理冲突的一种能力,即如果有多个选择器选中了同一个标签那么会有覆盖效果

    注意:
    1、层叠性只有在多个选择器选中了同一个标签,然后设置了相同的属性,
    才会发生层叠性
    ps:通过谷歌浏览器可以查看到,一些属性被划掉了

    3、优先级

    定义:

    当多个选择器选中同一个标签,并且给同一个标签设置相同的属性时,如何层叠就由优先级来确定

    优先级
    整体优先级从高到底:行内样式>嵌入样式>外部样式

    ​ 行内样式并不推荐使用,所以我们以嵌入为例来介绍优先级

    1、大前提:直接选中 > 间接选中(即继承而来的)

    #1、以下为直接选中
        <style type="text/css">
            #id1 {
                color: red;
            }
    
            .ppp {
                color: green;
            }
    
            p {
                color: blue;
            }
        </style>
    
    #2、以下为间接选中
        <style type="text/css">
            ul {
                color: yellow;
            }
        </style>
    
    
        <ul>
            <li>
                <p id="id1" class="ppp">我是span</p>
            </li>
        </ul>
    

    2、如果都是间接选中,那么谁离目标标签比较近,就听谁的

    3、如果都是直接选中,并且都是同类型的选择器,那么就是谁写的在后面就听谁的

    4、如果都是直接选中,并且是不同类型的选择器,那么就会按照选择器的优先级来层叠

    id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认(即没有设置任何属性)

    5、优先级之==!important==

    [

    #1、作用:还有一种不讲道理的!import方式来强制指定的属性的优先级提升为最高,但是不推荐使用。因为大量使用!import的代码是无法维护的。
      
    #2、注意:
        1、!important只能用于直接选中,不能用于间接选中
        2、!important只能用于提升被指定的属性的优先级,其他属性的优先级不会被提升
        3、!important必须写在属性值分号的前面
    

    6、优先级之权重计算

    #1、强调
    如果都是直接选中,并且混杂了一系列其他的选择器一起使用时,则需要通过计算机权重来判定优先级
    
    #2、计算方式
    #1、id数多的优先级高
    #2、id数相同,则判定类数多的优先级高
    #3、id数、class数均相同,则判定标签数多的优先级高
    #4、若id数、class数、标签数均相同,则无需继续往下计算了,谁写在后面谁的优先级高
    
    展开全文
  • HTML、CSS知识点总结

    2020-09-17 15:32:18
    CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠

    一,html+css基础

    1-1 Html和CSS的关系

    学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:

    1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
    2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
    3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

    1-2

    HTML标签不区分大小写,h1和H1是一样的,但建议小写,因为大部分程序员都以小写为准。

    1-3

    一个HTML文件是有自己固定的结构的。

    <html>
        <head>...</head>
        <body>...</body>
    </html>
    

    代码讲解:

    1. <html></html>称为根标签,所有的网页标签都在<html></html>中。
    2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title><script><style><link><meta>等标签,头部标签在下一小节中会有详细介绍。
    3.<body></body>标签之间的内容是网页的主要内容,如<h1><p><a><img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
    

    1-4

    1,下面这些标签可用在 head 部分:

    <head>
        <title>...</title>
        <meta>
        <link>
        <style>...</style>
        <script>...</script>
    </head>
    

    2,代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。
    语法:<!--注释文字 -->
    3,CSS注释代码

    就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明(Html中使用<!--注释语句-->)
    

    1-5

    1,语义化:说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如,网页上的文章的标题就得用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。
    2,语义化的作用
    1). 更容易被搜索引擎收录。
    2). 更容易让屏幕阅读器读出网页内容。

    二,认识标签(第一部分)

    2-1

    如果想在网页上显示文章,这时就需要<p>标签了,把文章的段落放到<p>标签中。
    语法:
    <p>段落文本</p>
    

    2-2

    <hx>标签来制作文章的标题。
    标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
    语法:
    <hx>标题文本</hx> (x为1-6)
    文章的标题前面已经说过了,可以使用标题标签,另外网页上的各个栏目的标题也可使用它们
    

    2-3

    有了段落又有了标题,现在如果想在一段话中特别强调某几个文字,这时候就可以用到<em><strong>标签。
           但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调
    

    2-4

    <em><strong><span>的区别:
    1. <em><strong>标签是为了强调一段话中的关键字时使用,它们的语义是强调。
    2. <span>标签是没有语义的,它的作用就是为了设置单独的样式用的,把一段话圈起来,然后用css设置样式。
    

    2-5

    q标签,短文本引用
      比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q>标签是你所需要的。
    语法:
    <q>引用文本</q>
    1,注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。
    2,注意这里用<q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话
    
    
    blockquote标签,长文本引用
      <blockquote>的作用也是引用别人的文本。但它是对长文本的引用
    <q>标签是对简短文本的引用,比如说引用一句话就用到<q>标签。
    语法:
    <blockquote>引用文本</blockquote>
    浏览器对<blockquote>标签的解析是缩进样式
    

    2-6

    换行标签<br/>
    <br/>标签作用相当于word文档中的回车。
    分割线标签<hr/>
    <hr/>标签和<br/>标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。
    <hr/>标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改。
    

    2-7

    html特殊字符
    空格:&nbsp; (;分号必不可少)
    
    

    2-8

    address标签,为网页加入地址信息
    语法:
    <address>地址信息</address>
    如:
    <address>北京市西城区德外大街10</address>
          在浏览器上显示的样式为斜体,如果不喜欢斜体,当然可以,可以在后面的课程中使用css样式来修改它<address>标签的默认样式
    

    2-9

    在介绍语言技术的网站中,必免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>标签了,如下面例子:
    <code>var i=i+300;</code>
    语法:
    <code>代码语言</code>
    注意:在文章中一般如果要插入多行代码时不能使用<code>标签,如果是多行代码,可以使用<pre>标签。
    
    
    <pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。如果用以前的方法,回车需要输入<br>签,空格需要输入&nbsp;。
    注意:<pre> 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是<pre>标签的一个常见应用就是用来展示计算机的源代码。
    

    三,认识标签(第二部分)

    3-1

    1,无序列表

    ul-li是没有前后顺序的信息列表。
    语法:
    <ul>
      <li>信息</li>
      <li>信息</li>
       ......
    </ul>
    举例:
    <ul>
      <li>精彩少年</li>
      <li>美丽突然出现</li>
      <li>触动心灵的旋律</li>
    </ul>
    ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点
    

    2,有序列表

    语法:
    <ol>
       <li>信息</li>
       <li>信息</li>
       ......
    </ol>
    举例:
    下面是一个热点课程下载排行榜:
    <ol>
       <li>前端开发面试心法 </li>
       <li>零基础学习html</li>
       <li>JavaScript全攻略</li>
    </ol>
    <ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1

    3-2

    <div>容器标签
    在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。
    语法:
    <div></div>
    确定逻辑部分:
    什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用<div>标签作为容器
    注释:<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。
    

    3-3

    创建表格的五个元素:
    table、tbody、tr、th、td
    1<table></table>:整个表格以<table>标记开始、</table>标记结束。
    2<tbody></tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。(这个标签基本上不怎么用了)
    3<tr></tr>:表格的一行,所以有几对tr 表格就有几行。
    4<td></td>:表格的一个单元格,一行中包含几对<td>...<td/>,说明一行中就有几列。
    5<th></th>:表格的头部的一个单元格,表格表头。
    6、表格中列的个数,取决于一行中数据单元格的个数。
    
    
    表格还是需要添加一些标签进行优化,可以添加标题和摘要
    <table summary="本表格记录2012年到2013年库存记录,记录包括U盘和耳机库存量">
      <caption>2012年到2013年库存记录</caption>
    

    3-4

    1,使用<a>标签,链接到别一个页面
    使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。
    语法:
    <a href=”目标网址”>链接显示的文本</a>
    例如:
    <a href = "http://www.imooc.com">click here!</a>
    上面例子作用是单击click here!文字,网页链接到http://www.imooc.com这个网页。
    

    3-5

    认识<img>标签,为网页插入图片
    在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img>标签来插入图片。
    语法:
    <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
    举例:
    <img src = "myimage.gif" alt = "My Image" title = "My Image" />
    讲解:
    1、src:标识图像的位置;
    2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
    3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)4、图像可以是GIF,PNG,JPEG格式的图像文件。
    

    四,表单标签(与用户进行交互)

    4-1

    表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
    语法:
    <form   method="传送方式"   action="服务器文件">
    讲解:
    1.<form><form>标签是成对出现的,以<form>开始,以</form>结束。
    2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)3.method : 数据传送的方式(get/post)。
    

    4-2

    <input>输入框
    文本输入框、密码输入框
    当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。
    语法:
    <form>
       <input type="text/password" name="名称" value="文本" />
    </form>
    1、type:
       当type="text"时,输入框为文本输入框;
       当type="password", 输入框为密码输入框。
    2、name:为文本框命名,以备后台程序ASP 、PHP使用。
    3、value:为文本输入框设置默认值。(一般起到提示作用)
    

    4-3

    文本域,支持多行文本输入
    当用户需要在表单中输入大段文字时,需要用到文本输入域。
    语法:
    <textarea  rows="行数" cols="列数">文本</textarea>
    1<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。
    2、cols :多行输入域的列数。
    3、rows :多行输入域的行数。
    

    4-4

    单选框,复选框
    语法:
    <input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
    1、type:
       当type="radio"时,控件为单选框
       当type="checkbox"时,控件为复选框
    2、value:提交数据到服务器的值(后台程序PHP使用)
    3、name:为控件命名,以备后台程序ASP、PHP使用
    4、checked:当设置checked="checked"时,该选项被默认选中
    注意:同一组的单选按钮,name取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。
    

    4-5

    下拉列表框,节省空间
    下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。
    语法:<option value="提交值">选项</option>
    提交值是向服务器提交的值,选项是显示的值。
    <form action="save.php" method="post" >
        
    <label>爱好:</label>
        
    <select>
          
    <option value="看书">看书</option>
          
    <option value="旅游" selected="selected">旅游</option>
          
    <option value="运动">运动</option>
          
    <option value="购物">购物</option>
        
    </select>
    
    
    </form>
    

    4-6

    使用下拉列表框进行多选
    下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,
    就可以实现多选功能,进行多选时按下Ctrl键同时进行单击,可以选择多个选项。
    如下代码:
    <form action="save.php" method="post" >
        
    <label>爱好:</label>
        
    <select multiple="multiple">
    
    
          <option value="看书">看书</option>
    
    
          <option value="旅游">旅游</option>
    
    
          <option value="运动">运动</option>
    
    
          <option value="购物">购物</option>
        
    </select>
    
    
    </form>
    
    

    4-7

    在表单中有两种按钮可以使用,分别为:提交按钮、重置。
    1,提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮。
    语法:
    <input   type="submit"   value="提交">
    type:只有当type值设置为submit时,按钮才有提交作用
    value:按钮上显示的文字
    
    
    2,重置按钮,重置表单信息
    当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
    语法:
    <input type="reset" value="重置">
    type:只有当type值设置为reset时,按钮才有重置作用
    value:按钮上显示的文字
    

    五,css样式

    5-1

    认识css样式
    CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
    如下列代码:
    p{
       font-size:12px;
       color:red;
       font-weight:bold;
    }
    使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
    

    5-2

    CSS代码语法
    css 样式由选择符和声明组成,而声明又由属性和值组成
    选择符{属性:}
    p{color:red;}
    选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
    声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:
    p{font-size:12px;color:red;}
    

    5-3

    从CSS 样式代码插入的形式来看基本可以分为以下3种:
    内联式、嵌入式和外部式三种
    1,内联式css样式
    就是把css代码直接写在现有的HTML标签中,如下面代码:
    <p style="color:red">这里文字是红色。</p>
    css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。如下代码:
    <p style="color:red;font-size:12px">这里文字是红色。</p>
    
    
    2,嵌入式css样式,
    就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色:
    <style type="text/css">
    span{
    color:red;
    }
    </style>
    嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。
    
    
    3,外部式css样式
    写在单独的一个文件中
    外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:
    <link href="base.css" rel="stylesheet" type="text/css" />
    注意:
    1、css样式文件名称以有意义的英文字母命名,如 main.css。
    2、rel="stylesheet" type="text/css" 是固定写法不可修改。
    3<link>标签位置一般写在<head>标签之内。
    

    六,CSS选择器

    每一条css样式定义由两部分组成,形式如下:
    选择器{
        样式;
    }{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素
    

    6-1,标签选择器

    标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html><body><h1><p><img>。例如下面代码:
    p{font-size:12px;line-height:1.6em;}
    上面的css样式代码的作用:为p标签设置12px字号,行间距设置1.6em的样式。
    

    6-2,类选择器

    类选择器在css样式编码中是最常用到的,如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。
    语法:
    .类选器名称{css样式代码;}
    注意:
    1、英文圆点开头
    2、其中类选器名称可以任意起名(但不要起中文噢)
    使用方法:
    第一步:使用合适的标签把要修饰的内容标记起来,如下:
    <span>胆小如鼠</span>
    第二步:使用class="类选择器名称"为标签设置一个类,如下:
    <span class="stress">胆小如鼠</span>
    第三步:设置类选器css样式,如下:
    .stress{color:red;}/*类前面要加入一个英文圆点*/
    

    6-3,ID选择器

    在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:
    1、为标签设置id="ID名称",而不是class="类名称"2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。
    

    6-4,类和ID选择器的区别

    相同点:可以应用于任何元素
    不同点:
    1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
    下面代码是正确的:
     <p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>
    而下面代码是错误的:
     <p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>
    2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。
    下面的代码是正确的(完整代码见右侧代码编辑器)
    .stress{
        color:red;
    }
    .bigsize{
        font-size:25px;
    }
    <p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>
    上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px
    
    
    下面的代码是不正确的(完整代码见右侧代码编辑器)
    #stressid{
        color:red;
    }
    #bigsizeid{
        font-size:25px;
    }
    <p>到了<span id="stressid bigsizeid">三年级</span>下学期时,我们班上了一节公开课...</p>
    上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。
    

    6-5,子选择器##

    还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的子元素。如下面的代码:
    .food>li{border:1px solid red;}
    这行代码会使class名为food下的子元素li加入红色实线边框。
    

    6-6,包含(后代)选择器

    包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:
    .first  span{color:red;}
    请注意这个选择器与子选择器的区别
    1,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代
    2,后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。
    总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
    

    6-7,通用选择器

    通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中任意标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:
    * {color:red;}
    

    6-8,伪类选择符

    更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:
    a:hover{color:red;}
    这行代码会使被<a></a>标签包裹的文字内容中的“胆小如鼠”字体颜色在鼠标滑过时变为红色。
    

    6-9,分组选择符

    当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:
    h1,span{color:red;}
    它相当于下面两行代码:
    h1{color:red;}
    span{color:red;}
    

    七,CSS的继承、层叠和特殊性。

    7-1

    CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。
    但注意有一些css样式是不具有继承性的。如border:1px solid red;
    

    7-2

    根据权值来判断使用哪个css样式
    浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。
    下面是权值的规则:
    标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:
    p{color:red;} /*权值为1*/
    p span{color:green;} /*权值为1+1=2*/
    .warning{color:white;} /*权值为10*/
    p span.warning{color:purple;} /*权值为1+1+10=12*/
    #footer .note p{color:yellow;} /*权值为100+10+1=111*/
    注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低
    

    7-3,层叠

    我们来思考一个问题:如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办?好,这一小节中的层叠帮你解决这个问题。
    层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
    如下面代码:
    p{color:red;}
    p{color:green;}
    <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
    最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。
    所以前面的css样式优先级就不难理解了:
    内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。
    

    7-4,重要性

    重要性
    我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。
    如下代码:
    p{color:red!important;}
    p{color:green;}
    <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
    这时 p 段落中的文本会显示的red红色。
    注意:!important要写在分号的前面
    

    八,CSS格式化排版

    8-1

    文字排版
    1,文字排版--字体
    我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体。
    body{font-family:"宋体";}
    这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)
    2,文字排版--字号、颜色
    可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色):
    body{font-size:12px;color:#666}
    3,文字排版--粗体
    我们还可以使用css样式来改变文字的样式:粗体、斜体、下划线、删除线,可以使用下面代码实现设置文字以粗体样式显示出来。
    p span{font-weight:bold;}
    4,文字排版--斜体
    以下代码可以实现文字以斜体样式在浏览器中显示:
    p a{font-style:italic;}
    <p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>
    5,文字排版--下划线
    有些情况下想为文字设置为下划线样式,这样可以在视觉上强调文字,可以使用下面代码来实现:
    p a{text-decoration:underline;}
    <p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>
    
    
    删除线,在电商网站上经常见。
    p a{text-decoration:line-through;}
    

    8-2

    段落排版
    1,段落排版--缩进
    中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:
    p{text-indent:2em;}
    注意:2em的意思就是文字的2倍大小。
    
    
    2,段落排版--行间距
    这一小节我们来学习一下另一个在段落排版中起重要作用的行间距属性(line-height),如下代码实现设置段落行间距为1.5倍。
    p{line-height:1.5em;}
    
    
    3,段落排版--字间距、字母间距
    文字间隔、字母间隔设置:
    如果想在网页排版中设置文字间隔或者字母间隔就可以使用    letter-spacing来实现,如下面代码:
    h1{
        letter-spacing:50px;
    }
    ...
    <h1>了不起的盖茨比</h1>
    注意:这个样式使用在英文单词时,是设置字母与字母之间的间距。
    单词间距设置:
    如果我想设置英文单词之间的间距呢?可以使用word-spacing来实现。如下代码:
    h1{
        word-spacing:50px;
    }
    ...
    <h1>welcome to imooc!</h1>
    

    九,CSS盒模型

    9-1

    元素分类
    在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素和内联块状元素。
    常用的块状元素有:
    <div><p><h1>...<h6><ol><ul><dl><table><address><blockquote><form>
    常用的内联元素有:
    <a><span><br><i><em><strong><label><q><var><cite><code>
    常用的内联块状元素有:
    <img><input>
    

    9-2

    元素分类--块级元素
    什么是块级元素?在html中<div><p><h1><form><ul><li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将行内元素a转换为块状元素,从页使用a元素具有块状元素特点。
    a{display:block;}
    块级元素特点:
    1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
    2、元素的高度、宽度、行高以及顶和底边距都可设置。
    3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
    

    9-3

    元素分类--行内元素
    在html中,<span><a><label><input><img><strong><em>就是典型的行内元素(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为行内元素。
    行内元素特点:
    1、和其他元素都在一行上;
    2、元素的高度、宽度、行高及顶部和底部边距不可设置;
    3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
    

    9-4

    元素分类--内联块状元素
    内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)<img><input>标签就是这种内联块状标签。
    inline-block元素特点:
    1、和其他元素都在一行上;
    2、元素的高度、宽度、行高以及顶和底边距都可设置。
    

    9-5

    盒模型--边框(一)
    盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
    如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框:
    div{
        border:2px  solid  red;
    }
    上面是border代码的缩写形式,可以分开写:
    div{
        border-width:2px;
        border-style:solid;
        border-color:red;
    }
    注意:
    1、border-style(边框样式)常见样式有:
    dashed(虚线)| dotted(点线)| solid(实线)。
    
    
    2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:
    border-color:#888;//前面的井号不要忘掉。
    
    

    9-6

    盒模型--边框(二)
    现在有一个问题,如果有想为p标签单独设置下边框,而其它三边都不设置边框样式怎么办呢?css样式中允许只为一个方向的边框设置样式:
    div{border-bottom:1px solid red;}
    同样可以使用下面代码实现其它三边上、右、左边框的设置:
    border-top:1px solid red;
    border-right:1px solid red; 
    border-left:1px solid red;
    
    

    9-7

    盒模型--边界
    元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。如下代码:
    div{margin:20px 10px 15px 30px;}
    也可以分开写:
    div{
       margin-top:20px;
       margin-right:10px;
       margin-bottom:15px;
       margin-left:30px;
    }
    如果上下左右的边界都为10px;可以这么写:
    div{ margin:10px;}
    如果上下边界一样为10px,左右一样为20px,可以这么写:
    div{ margin:10px 20px;}
    总结一下:padding和margin的区别,padding在边框里,margin在边框外。
    

    9-8

    盒模型--填充
    元素内容与边框之间是可以设置距离的,称之为填充。填充也可分为上、右、下、左。如下代码:
    div{padding:20px 10px15px 30px;}
    顺序一定不要搞混。可以分开写上面代码:
    div{
       padding-top:20px;
       padding-right:10px;
       padding-bottom:15px;
       padding-left:30px;
    }
    如果上、右、下、左的填充都为10px;可以这么写
    div{padding:10px;}
    如果上下填充一样为10px,左右一样为20px,可以这么写:
    div{padding:10px 20px;}
    

    9-9

    盒模型代码简写
    还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。具体应用在margin和padding的例子如下:
    margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
    通常有下面三种缩写方法:
    1、如果top、right、bottom、left的值相同,如下面代码:
    margin:10px 10px 10px 10px;
    可缩写为:
    margin:10px;
    2、如果top和bottom值相同、left和 right的值相同,如下面代码:
    margin:10px 20px 10px 20px;
    可缩写为:
    margin:10px 20px;
    3、如果left和right的值相同,如下面代码:
    margin:10px 20px 30px 20px;
    可缩写为:
    margin:10px 20px 30px;
    注意:padding、border的缩写方法和margin是一致的。
    

    9-10

    颜色值缩写
    关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
    例子1:
    p{color:#000000;}
    可以缩写为:
    p{color: #000;}
    例子2:
    p{color: #336699;}
    可以缩写为:
    p{color: #369;}
    

    十,CSS布局模型

    10-1

    css布局模型
    清楚了CSS 盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式。 
    CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
    在网页中,元素有三种布局模型:
    1、流动模型(Flow)
    2、浮动模型 (Float)
    3、层模型(Layer)
    
    

    10-2

    流动模型(一)
    流动(Flow):自上而下。
    先来说一说流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
    流动布局模型具有2个比较典型的特征:
    
    
    第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。
    
    
    第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)
    右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。
    

    10-3

    浮动模型
    块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的,但可以用CSS定义为浮动,如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。
    div{
        width:200px;
        height:200px;
        border:2px red solid;
        float:left;
    }
    <div id="div1"></div>
    <div id="div2"></div>
    
    
    注意:设置浮动的同时一定要先设置块状元素的宽度,且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。
    
    

    10-4

    什么是层模型?
    什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。
    如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位(positioning)属性来支持层布局模型。
    层模型有三种形式:
    1、绝对定位(position: absolute)
    2、相对定位(position: relative)
    3、固定定位(position: fixed)
    
    
    1,层模型--绝对定位(相对于父类)
    如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
    如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。
    div{
        width:200px;
        height:200px;
        border:2px red solid;
        position:absolute;
        left:100px;
        top:50px;
    }
    <div id="div1"></div>
    
    
    2,层模型--相对定位(相对于以前)
    如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
    如下代码实现相对于以前位置向下移动50px,向右移动100px;
    #div1{
        width:200px;
        height:200px;
        border:2px red solid;
        position:relative;
        left:100px;
        top:50px;
    }
    <div id="div1"></div>
    
    
    3,层模型--固定定位(相对于网页窗口)
    固定住某一坐标。
    fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed?属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。
    #div1{
        width:200px;
        height:200px;
        border:2px red solid;
        position:fixed;
        left:100px;
        top:50px;
    }
    

    10-5

    Relative与Absolute组合使用
    小伙伴们学习了12-6小节的相对定位的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,大家有没有想过可不可以相对于其它元素进行定位呢?答案是肯定的,当然可以。使用position:relative来帮忙,但是必须遵守下面规范:
    1、参照定位的元素必须是相对定位元素的前辈元素:
    <div id="box1"><!--参照定位的元素-->
        <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
    </div>
    从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。
    2、参照定位的元素必须加入position:relative;
    #box1{
        width:200px;
        height:200px;
        position:relative;        
    }
    3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。
    #box2{
        position:absolute;
        top:20px;
        left:30px;         
    }
    这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了,而可以自由设置了)。
    
    展开全文
  • CSS知识点总结

    2020-09-17 16:01:49
    CSS知识点总结 第八章 css基础知识 css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表; 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签元素里面 css内的...
  • 前端笔记一

    2020-09-16 13:25:34
    第一次写笔记,没有用markdown语法,写的很烂,算是做个记录吧,给自己一个交代。 总体路线 1.H5C3 2.JS 3.前后端交互 4.vue 5.WeChat micro-app 6.React ctrl+alt 选中图层 数据封装、继承和多态是面向对象的三大...
  • CSS

    千次阅读 2018-08-31 10:07:50
    学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10....
  • element-ui等前端组件库中,都有人家封装好的组件,可以直接拿来用。不想用的那就只能自己写了。 <select class="sel-choose" name="" v-model="selId" @change="choose" :class="{'default-color':selected}"&...
  • CSS 转义字符对照表

    2018-09-06 17:55:40
    平时在WEB制作中,您又有用到多少?或者说你在平时使用之时,是否也会碰到,有许多特殊字符要如何打印出来?比如说“笑脸”,比如说“版权号”。要是你用时忘记了这些特殊字符,不要紧,请记住今天这个地址,你就...
  • CSS 元素垂直居中的 6种方法

    万次阅读 多人点赞 2018-01-17 20:40:13
    转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的...
  • 史上最全的CSS hack方式一览

    万次阅读 多人点赞 2013-09-28 19:33:38
    什么是CSS hack 由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面效果。这时,我们为了获得统一的...
  • 使用css属性,使div上下左右移动

    万次阅读 2018-06-06 15:48:25
    本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移。一、使用css3 transform:translate(X,Y)来偏移元素 transform属性应用于元素的2D或3D转换,这个属性允许你将元素旋转,缩放,移动...
  • 动态创建css样式有两种方式:1.引入外部css文件 2.插入css代码片段 动态插入css外部文件的方法:function loadStyle(url){ var link = document.createElement('link'); link.type = 'text/css'; link.rel = '...
  • CSS设置背景透明度

    万次阅读 2020-08-10 17:31:08
    实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法:css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)IE...
  • CSS样式自动换行(强制换行)

    万次阅读 多人点赞 2012-09-24 10:36:30
    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的 ...
  • CSS Hack是什么意思?css hack有什么用?

    万次阅读 多人点赞 2018-08-14 10:02:58
    CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的。 例如: 1、margin...
  • C# css文件引用缓存问题

    万次阅读 2018-02-25 13:59:24
    现在浏览器都会缓存css、js文件等,如果更改css文件的内容,浏览器是不会自动获取最新的文件,这样的机制也是为了更快速的访问网站,我们可以在引用文件时在后面加一个随机数,这样每次都会重新请求。 &lt;link ...
1 2 3 4 5 ... 20
收藏数 1,559,598
精华内容 623,839
关键字:

css