CSS简介

什么是CSS

CSS是Cascading Style Sheet的缩写, 层叠 样式 表

为什么使用CSS

CSS的作用是美化页面, 可以设置页面元素的样式包括:位置,大小,颜色等等

如何使用CSS

在html页面中添加css的三种方式:

  • 内联样式:在标签的style属性中添加css样式代码, 弊端:不能复用
  • 内部样式:在head标签里面添加style标签,在标签体内通过选择器给元素添加样式, 弊端:只能在当前页面复用,不能多页面复用
  • 外部样式:在单独的css样式文件中写样式代码,在HTML页面里通过link标签引入外部文件. 好处是可以实现多页面复用
  • 三种引入方式的优先级: 内联最高, 内部和外部后执行的覆盖先执行

CSS的三大特性

  1. 继承性:元素可以继承上级元素文本和字体相关的样式,部分标签自带效果不受继承影响,比如超链接a标签的字体颜色 ,h1-h6字体大小, 好处:可以节省代码提高开发效率
  2. 层叠性:多个选择器有可能选择到同一个元素,如果作用的样式不同则样式全部层叠生效,如果作用的样式相同则由优先级决定哪个生效
  3. 选择器的优先级: 作用范围越小优先级越高, id选择器>类选择器>标签名选择器>继承(由于继承属于间接选中所以优先级比较低)

CSS选择器

  • 标签名选择器: 通过标签的名称选取页面中所有同名标签
    1. 标签名 {
    2.   /* 样式 */
    3. }
  • id选择器: 通过元素的id选取元素, 页面中元素的id要保证唯一性
    1. #id {
    2.   /* 样式 */
    3. }
  • 类选择器: 给多个元素添加相同的class, 通过类选择器可以选择多个元素
    1. .class {
    2.   /* 样式 */
    3. }
  • 分组选择器: 可以将多个选择器合并成一个选择器
    1. div,#id,.class {
    2.   /* 样式 */
    3. }
  • 任意元素选择器: 选取页面中所有元素 ```css
  • { / 样式 / } ```
  • 属性选择器: 通过元素属性的值选取元素
    1. 标签名[属性名='值'] {
    2.   /* 样式 */
    3. }
  • 子孙后代选择器:通过元素之间的层级关系选择元素
    1. div div span {
    2.   /* 样式 */
    3. }
  • 子元素选择器: 通过元素之间的层级关系选择元素
    1. div>div>span {
    2.   /* 样式 */
    3. }
  • 伪类选择器: 选择元素的状态(未访问/访问过/悬停/点击)
    1. /* link/visited/hover/active */
    2. a:link {
    3.   /* 样式 */
    4. }
选择器 示例 示例说明 CSS
.class .intro 选择所有class=”intro”的元素 1
#id #firstname 选择所有id=”firstname”的元素 1
* * 选择所有元素 2
element p 选择所有

元素

 1
element,element div,p 选择所有
元素和

元素

 1
element element div p 选择
元素内的所有

元素

 1
element>element div>p 选择所有父级是
元素的

元素

 2
element+element div+p 选择所有紧跟在
元素之后的第一个

元素

 2
[attribute] [target] 选择所有带有target属性元素 2
[attribute=value] [target=-blank] 选择所有使用target=”-blank”的元素 2
[attribute~=value] [title~=flower] 选择标题属性包含单词”flower”的所有元素 2
[attribute|=language] [lang|=en] 选择 lang 属性等于 en，或者以 en- 为开头的所有元素 2
:link a:link 选择所有未访问链接 1
:visited a:visited 选择所有访问过的链接 1
:active a:active 选择活动链接 1
:hover a:hover 选择鼠标在链接上面时 1
:focus input:focus 选择具有焦点的输入元素 2
:first-letter p:first-letter 选择每一个

元素的第一个字母

 1
:first-line p:first-line 选择每一个

元素的第一行

 1
:first-child p:first-child 指定只有当

元素是其父级的第一个子级的样式。

 2
:before p:before 在每个

元素之前插入内容

 2
:after p:after 在每个

元素之后插入内容

 2
:lang(language) p:lang(it) 选择一个lang属性的起始值=”it”的所有

元素

 2
element1~element2 p~ul 选择p元素之后的每一个ul元素 3
[attribute^=value] a[src^=”https”] 选择每一个src属性的值以”https”开头的元素 3
[attribute$=value] a[src$=”.pdf”] 选择每一个src属性的值以”.pdf”结尾的元素 3
[attribute*=value] a[src*=”runoob”] 选择每一个src属性的值包含子字符串”runoob”的元素 3
:first-of-type p:first-of-type 选择每个p元素是其父级的第一个p元素 3
:last-of-type p:last-of-type 选择每个p元素是其父级的最后一个p元素 3
:only-of-type p:only-of-type 选择每个p元素是其父级的唯一p元素 3
:only-child p:only-child 选择每个p元素是其父级的唯一子元素 3
:nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素 3
:nth-last-child(n) p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 3
:nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素 3
:nth-last-of-type(n) p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 3
:last-child p:last-child 选择每个p元素是其父级的最后一个子级。 3
:root :root 选择文档的根元素 3
:empty p:empty 选择每个没有任何子级的p元素（包括文本节点） 3
:target #news:target 选择当前活动的#news元素（包含该锚名称的点击的URL） 3
:enabled input:enabled 选择每一个已启用的输入元素 3
:disabled input:disabled 选择每一个禁用的输入元素 3
:checked input:checked 选择每个选中的输入元素 3
:not(selector) :not(p) 选择每个并非p元素的元素 3
::selection ::selection 匹配元素中被用户选中或处于高亮状态的部分 3
:out-of-range :out-of-range 匹配值在指定区间之外的input元素 3
:in-range :in-range 匹配值在指定区间之内的input元素 3
:read-write :read-write 用于匹配可读及可写的元素 3
:read-only :read-only 用于匹配设置 “readonly”（只读） 属性的元素 3
:optional :optional 用于匹配可选的输入元素 3
:required :required 用于匹配设置了 “required” 属性的元素 3
:valid :valid 用于匹配输入值为合法的元素 3
:invalid :invalid 用于匹配输入值为非法的元素 3

颜色赋值

  • 三原色 RGB RedGreenBlue 每个颜色的取值范围0-255
  1. 通过颜色单词赋值 reg/green/blue….
  2. 6位16进制赋值 #0000ff
  3. 3位16进制赋值 #00f 每一位重复一次 00f=0000ff
  4. 3位10进制赋值 rgb(255,0,0)
  5. 4位10进制赋值 rgba(255,0,0,0-1) a=alpha透明度 值越小越透明

背景图片

background-image:url(路径); 设置背景图片

  1. div{
  2.     background-image:url(https://www.baidu.com);
  3. }

background-size: 200px 300px; 设置背景图片尺寸

  1. div{
  2.     background-size: 200px 300px; 
  3. }

background-repeat: no-repeat; 禁止重复

  1. div{
  2.     background-repeat: no-repeat;
  3. }

background-position: 横向百分比 纵向百分比; 设置背景图片位置

  1. div {
  2.     background-position: 50% 50%;
  3. }

文本和字体相关样式

  • text-decoration:overline/underline/line-througth/none 文本修饰:上划线/下划线/删除线/去掉线
    1. p {
    2.   text-decoration: overline; /*上划线*/
    3.   text-decoration: underline; /*下划线*/
    4.   text-decoration: line-through; /*删除线*/
    5.   text-decoration: none; /*去掉修饰线*/
    6. }
  • text-align:left/right/center; 水平对齐方式 左/右/中
    1. p {
    2.   text-align: left; 
    3.   text-align: center;
    4.   text-align: right;
    5. }
  • color:red; 字体颜色
    1. p {
    2.   color: red;
    3. }
  • line-height:20px; 行高,多行可以控制行间距 单行可以控制垂直居中
    1. p {
    2.   line-height: 20px;
    3. }
  • text-shadow: h-shadow(水平阴影的位置。允许负值。) v-shadow(垂直阴影的位置。允许负值。) blur(模糊的距离。) color(颜色);
    1. p {
    2.  text-shadow: 2px 2px #ff0000;
    3. }
  • font-weight:bold加粗/nomal去掉加粗;
    1. p{
    2.   font-weight: bold;
    3. }
  • font-size:20px; 设置字体大小 默认16px
    1. p {
    2.   font-size: 20px;
    3. }
  • font-style:italic; 斜体
    1. p {
    2.   font-style: italic;
    3. }
  • font-family: xxx,xxx,xxx; 设置字体 可以设置多个字体 依次检测 哪个能用用哪个
    1. p {
    2.   font-family: '宋体','黑体','楷体';
    3. }
  • font:20px xxx,xxx,xxx;
  1. p {
  2.     font: font-style font-variant font-weight font-size/line-height font-family;
  3. }

元素的显示方式display

  • block:块级元素, 特点:独占一行, 可以修改元素的宽高, 如: h1-h6,p,div等
    1. p{
    2.   display: block;
    3. }
  • inline:行内元素,特点:共占一行, 不能修改宽高,如:span,b,i,u,s超链接a等
    1. span {
    2.   display: inline;
    3. }
  • inline-block:行内块元素, 特点: 共占一行并且可以修改元素宽高,如:img,input等
    1. input{
    2.   display: inline-block;
    3. }

盒子模型

  • 盒子模型=宽高+外边距+边框+内边距

  • 作用:用来控制元素的显示效果

    • 宽高: 控制元素尺寸
    • 外边距:控制元素的显示位置
    • 边框: 控制元素边框
    • 内边距: 控制元素内容位置

盒子模型之宽高

  • 通过width和height控制元素的宽高, 有两种赋值方式

    • 通过像素赋值
    • 通过上级元素的百分比赋值
  • 行内元素不能修改宽高,由内容决定
  1. div{
  2.     width: 100px;
  3.     height: 100px;
  4. }

盒子模型之外边距

  • 什么是外边距?
    元素距上级元素或相邻兄弟元素的距离称为外边距.

  • 赋值方式:

    • margin-left/right/top/bottom: 10px; 单独某一个方向赋值
    • margin:10px; 四个方向为10
    • margin:10px 20px; 上下10 左右20
    • margin:0 auto; 上下0 左右居中
    • margin:10px 20px 30px 40px; 上右下左 顺时针

  • 行内元素上下外边距无效

  • 上下相邻两个元素彼此添加外边距 取最大值 ,左右相邻彼此添加外边距 两者相加

  • 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题, 通过给上级元素添加overflow:hidden解决

  1. div{
  2.     /* 顺序: 上 右 下 左 */
  3.     margin: 10px;
  4.     margin: 10px 5px;
  5.     margin: 10px 5px 15px 20px;
  6.     margin-top: 10px;
  7.     margin-right: 5px;
  8.     margin-bottom: 15px;
  9.     margin-left: 20px;
  10. }

盒子模型之边框

  • 赋值方式:

    • 四个方向赋值 border : 1px solid red;
    • 单独某个方向赋值 border-left/right/top/bottom: 1px solid red;
  • 圆角: border-radius:20px; 值越大越圆 超过宽高一半为正圆
  1. div {
  2.     border: 1px solid black;
  3.     border-top: 1px solid red;
  4.     border-right: 1px solid blue;
  5.     border-bottom: 1px solid yellow;
  6.     border-left: 1px solid green;
  7.     border-radius: 20px;
  8. }

盒子模型之内边距

  • 什么是内边距?
    元素边缘距内容的距离称为内边距

  • 赋值方式:

    • padding-left/right/top/bottom: 20px; 单独某个方向赋值
    • padding:10px; 四个方向赋值
    • padding:10px 20px; 上下10 左右20
    • padding:10px 20px 30px 40px; 上右下左 顺时针赋值
  1. /*同margin*/

定位方式

  • 五种定位方式(4+1)
  • 静态定位+相对定位+绝对定位+固定定位
  • 浮动定位
  • 静态定位时使用外边距控制元素的显示位置, 但是静态定位不能实现元素的层叠效果.所以需要用到其它的几种定位方式应对复杂的显示效果.

定位方式之静态定位

  • 格式: position:static; (由于是默认值,可以不写)
  • 默认的定位方式,也称为文档流定位
  • 通过外边距控制元素的显示位置, 块级元素从上往下排列,行内元素从左向右排列,没有办法实现元素层叠效果.

定位方式之相对定位

  • 格式: position:relative;
  • 元素不脱离文档流(元素修改为相对定位后 仍然占着原来的位置,其它元素位置不受影响)
  • 通过left/right/top/bottom控制元素的位置,坐标相对于元素的初始位置.
  1. div{
  2.     position: relative;
  3.     top: 10px;
  4.     right: 20px;
  5.     bottom: 0;
  6.     left: 98%;
  7. }

定位方式之绝对定位

  • 格式: position:absolute;
  • 元素脱离文档流(元素修改为绝对定位后 不占原来的位置,后面的元素会立即顶上来)
  • 通过left/right/top/bottom控制元素的位置,坐标相对于窗口(默认)或某一个上级元素做位置偏移(如果希望某一个上级元素为参照物,修改元素定位方式为相对定位即可)
  1. div{
  2.     position: absolute;
  3.     top: 10px;
  4.     right: 20px;
  5.     bottom: 0;
  6.     left: 98%;
  7. }

定位方式之固定定位

  • 格式: position:fixed;
  • 元素脱离文档流
  • 通过left/right/top/bottom控制元素的位置, 坐标相对于窗口.
  1. div{
  2.     position: fixed;
  3.     top: 10px;
  4.     right: 20px;
  5.     bottom: 0;
  6.     left: 98%;
  7. }

position定位总结:

  1. 使用默认的定位方式静态定位是无法实现元素层叠效果,如果需要层叠显示,考虑使用相对定位或绝对定位.
  2. 相对定位是唯一一个不脱离文档流仍然占着原来位置的定位方式,所以如果需求是只移动一个元素,其它元素不受影响时使用相对定位
  3. 绝对定位是唯一一个可以以某一个上级元素为参照物的定位方式
  4. 固定定位是只有当实现元素固定在窗口某个位置的时候使用

浮动定位float

  • 格式: float:left/right
  • 元素脱离文档流,从当前所在行向左或向右浮动,当撞到上级元素边缘或其它浮动元素时停止
  • 一行装不下会自动换行,换行时有可能被卡住
  • 当某个元素的所有子元素全部浮动后,自动识别高度为0 ,有可能会造成显示异常,可以通过给元素添加overflow:hidden解决此问题
  • 应用场景: 当需要将纵向排列的元素改成横向排列时 使用浮动定位.
  1. div{
  2.     float: left;
  3. }
  4. #root{
  5.     float: right;
  6. }

溢出设置overflow

  • visible 显示 (默认值)
  • hidden 隐藏 , 可以解决粘连问题 和 高度识别为0问题
  • scroll 滚动显示
  1. div{
  2.     overflow: hidden;
  3. }

行内元素垂直对齐方式vertical-align

  • baseline: 基线对齐(默认)
  • top:顶部对齐
  • middle:中间对齐
  • bottom:底部对齐
  1. p {
  2.     vertical-align: top;
  3. }

显示层级z-index

  • 当多个元素设置为相对定位或绝对定位时可以实现层叠效果, 通过z-index样式可以控制层叠的先后顺序
  • z-index: 默认值为0 ,值越大越靠前
  1. div{
  2.     z-index: 999;
  3. }

盗链图片

  1. 如果图片是通过img标签显示的 直接右键 赋值图片地址即可
  2. 如果不是img标签 是没有没有办法直接复制图片地址 , 右键检查 在样式里面找到路径 右键 copy link address 即可得到图片路径