> 文档中心 > CSS学习笔记

CSS学习笔记


CSS

1.介绍(层叠样式表)

是一组样式设置的规则,用户控制页面的外观样式

Q:为什么使用CSS

A:实现内容和样式的分离,便于开发。样式复用,便于网站的后期维护。页面的精准控制,让页面更精美。利用SEO,容易被搜索引擎搜录

2.用法

1.语法

<html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>      (选择器)  p{     (属性)color: red(属性值);     background: white; } h2{     color: blue; }    </style></head><body><h2>    CSS程序</h2><p> 主要内容</p></body></html>

style里面不能写注释,注释是HTML的()

2.应用方式

  • 内部样式

在页面头部通过style标签定义,对当前页面中所有符合样式选恶气的标签都起作用

  • 行内样式(嵌入样式)

使用HTML标签的style属性定义,只对设置style属性的标签起作用

<h1 style="color: red"> 123</h1>
  • 外部样式

使用单独的.css文件定义,然后在页面中使用link标签@import指令引入

  1. 使用link标签(style外部引入) html标签
<link rel="stylesheet" href="First.css">
  1. import导入(内部引入) css样式,css 2.1特有
@import url("First.css");

导入的缺点:容易先显示框架再进行渲染

优先级:(就近原则)

3.基本选择器

作用:选择页面上的某一个或者某一类元素

1.标签选择器

<style>    h1{     }</style>

2.类选择器

可以跨标签,选择所有class属性一致的标签

<style>    .zqy    {     }</style><h1 class="zqy">    </h1>

3.id选择器

<style>    #zqy    {     }</style><h1 id="zqy">//权证全局唯一    </h1>

4.层次选择器

1.后代选择器

body p{    color:red;}

body下所有p

2.子选择器()

body>p{    }div:nth-of-type(1)>input{    //div下第一个元素里面的input}

3.相邻兄弟选择器

(当前选择元素的下面一个元素)

.zqy+p{    xx}<p class="zqy">123

234

4.通用选择器

(当前选择元素的下面所有相同元素) 但是它本身不变

.zqy~h1{    color: red;}

5结构伪类选择器

根据HTML页面中元素之间的关系来定位HTML元素,从而减少对HTML元素的id属性和class属性的依赖。

    ul li:first-child    { background: red;    }    ul li:last-child    {    }    /*选中p1:定位到父元素,选择当前的第一个元素    选择当前p元素的父级元素,选中父级元素的第一个*/    p:nth-child(1)    { background: blue;    }    /*选中父级元素下的p元素的第二个,分类型*/    p:nth-of-type(2)    { background: red;    }p::first-line { }/*伪元素选择器*/::first-line是会选择一个元素(下面的情况中是

)中的第一行

zqy

jwj

  • 123
  • 234
  • 345

CSS学习笔记

6.属性选择器

1.a[target]{}2.a[target=xxx]3.a[target~=xx] 包含xx的所有元素 a[target*=xx]4.a[target|=xx]以xx开头的元素,元素必须是完整或独立的单词5.a[target^=xx]同上,但元素不必是完整或独立的单词6.a[target$=xx]以xx结尾的元素值不必是完整单词!     h1,.zqy//选择器列表    { color: red;    }

3.美化网页元素

1.有效传递页面信息

2.美化网页,网页漂亮,吸引用户

3.凸显页面主题

4.提高用户的体验

  • span标签:突出句子的重点

1.字体样式

1em 等于我们设计的当前元素的父元素上设置的字体大小

2.文本样式

 text-align:center;//左右排版text-indent:2em 缩进text-decoration:none(超链接去下划线)修饰关键词height:300pxline-height:300px 行高和块高度一致,就可以实现上下居中上中下划线underlineline-throughoverline文本图片对齐需要参照物image,span{    vertical-align:middle} 

关于line-height

CSS学习笔记

3.文本阴影及超链接伪类

:visited - CSS(层叠样式表) | MDN (mozilla.org)

:visited表示用户已访问过的链接(注意清除浏览器的记录):link用来选中元素当中的链接。它将会选中所有尚未访问的链接,包括那些已经给定了其他伪类选择器的链接:hover鼠标悬浮的状态:active鼠标点击的状态
元素在X和Y方向的偏移量、模糊半径和颜色值组成text-shadowtext-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;可以写多个demo混合

4.列表

元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器,在不使用CSS的情况下,其对内容或布局没有任何将内容写进div,然后对div进行区域的划分

CSS学习笔记

5.背景

  1. 背景颜色
  2. 背景图片
    div    { width: 1000px; height: 500px; border: red solid 1px;    background-image: url("/image/箭头.png") ;    background-repeat: no-repeat;///重复方式 repeat-x 水平平铺 repeat-y 垂直平铺    background-position: 150px 50px;//图片位置    background-size: 50px 50px;//图片大小或者直接background:在里面设置属性    }    .zqy    { background-repeat: no-repeat;    }<div class="zqy">

6.渐变

Grabient渐变网站

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于数据类型,是一种特别的数据类型。

4.盒子模型

1.盒子

CSS学习笔记

2.边框

注意系统默认盒子外边框为8,所以要记得更改body{margin:0;}

3.内外边距,div居中

/* 应用于所有边 */margin: 1em;margin: -3px;/* 上边下边 | 左边右边 */margin: 5% auto;(auto 自动移动 但是一般都是居中)/* 上边 | 左边右边 | 下边 */margin: 1em auto 2em;/* 上边 | 右边 | 下边 | 左边 */margin: 2px 1em 0 auto;/* 全局值 */margin: inherit;margin: initial;margin: unset;

问题1;

div:nth-of-type(1) 选中的内容会影响到后面的

<div id="box">    <h2>会员登陆</h2>    <form action="#"> <div> <span>用户名</span> <input type="text">    </div> <div>     <span>密码</span>     <input type="text"> </div> <div>     <span>邮箱</span>     <input type="email"> </div></form></div>//外层div也被算进 div:nth-of-type(1)里面,但是后面无误

整个盒子模型的大小 根据四个部分进行计算 margin+border+padding+content

4.圆角边框及盒子阴影

 /*左上 右上 右下 左下 顺时针*/ border-radius: 50%;//圆形
X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。/* x偏移量 | y偏移量 | 阴影颜色 */box-shadow: 60px -16px teal;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */box-shadow: 10px 5px 5px black;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */box-shadow: inset 5em 1em gold;/* 任意数量的阴影,以逗号分隔 */box-shadow: 3px 3px red, -1em 0 0.4em olive;/* 全局关键字 */box-shadow: inherit;box-shadow: initial;box-shadow: unset;

5.单独元素居中

display:block就是将元素显示为块级元素<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>  <style>    div{ background-size: 50px 50px; //width:xx //  margin:0 auto    }    img    { border-radius: 50%; box-shadow:10px 10px 100px red; display: block; margin: 0 auto;    }  </style></head><body><div>    <img src="/HTML/1.jpg" alt=""></div></body></html>或者采用设置div的宽度,然后通过移动div来设置图片居中,但问题是0 auto是根据自身宽度来决定,所以不推荐

7.display, 浮动

display:none      /*display:      block 块元素      inline 行内元素      inline-block是块元素,但是可以内联,在一行*/
CSS 属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,尽管仍然保持部分的流动性(与绝对定位相反)。float:right..浮动会根据窗口的变化而进行变动clear:right 右侧不允许有浮动元素clear:left 左侧不允许有浮动元素clear:both 两侧不允许有浮动元素

父级边框塌陷的问题

原因:父级元素边框塌陷的原因是,当父元素没有设置足够的大小时,父元素的高度是由父元素中最高子元素的高度决定的。一旦子元素浮动,脱离了文档流不再占据原本的位置,父元素中没有非浮动的可见子元素,父元素的高度就会塌陷。

CSS学习笔记

解决方案;

1.增加父级元素的高度:这种方式不推荐使用,太不灵活。

CSS学习笔记

2.增加一个空的div标签,清除附近的浮动

3.overflow 给父元素设置overflow:hidden

CSS学习笔记

/* 默认值。内容不会被修剪,会呈现在元素框之外 */overflow: visible;/* 内容会被修剪,并且其余内容不可见 */overflow: hidden;/* 内容会被修剪,浏览器会显示滚动条以便查看其余内容 */overflow: scroll;/* 由浏览器定夺,如果内容被修剪,就会显示滚动条 */overflow: auto;/* 规定从父元素继承overflow属性的值 */overflow: inherit;

4.4.在父类添加一个伪类after可避免父级边框塌陷的问题(很重要)

CSS伪元素::after用来创建一个伪元素,作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

 .kuang:after{content: "";display: block;clear: both;}

8.定位

  1. 相对定位

原来的位置任然在标准文档流中,位置依然被保存

 #first {     background: cyan;     border:2px red solid;     position: relative;/*相对定位,相对自己原来的位置*/     top: -10px;/// 原来的位置相对于现在的位置,即现在的位置在原来的位置的上面10px     left: 20px; }
  1. 绝对定位

绝对定位的元素不再存在于正常文档布局流中。相反,它坐在它自己的层独立于一切。

1.在没有父级元素,则根据浏览器定位
2.假设父级元素存在定位,我们通常会相对于父级元素定位
3.在父级元素范围内移动
相对于父级或者浏览器的位置,进行指定的便宜,绝对哦定位的话,不在标准文档流中,原来的位置不会被保留

3.固定定位

    div:nth-of-type(1)    { width: 100px; height: 100px; background: red; position: absolute; right: 0; bottom: 0;    }    div:nth-of-type(2)    { width: 50px; height: 50px; background: yellow; position: fixed;//固定在浏览器中,不移动 right: 0; bottom: 0;    }

4.z-index

z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。 当元素之间重叠的时候, z-index 较大的元素会覆盖较小的元素在上层进行显示。(类似图形)默认是0,最高是999,设置显示次序

9.动画

less:是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

5.继承

css父类设置的元素,子类也会继承。

如设置ul,那么ul下面的li也会有相同的元素

CSS学习笔记

0px; background: red; position: absolute; right: 0; bottom: 0;    }    div:nth-of-type(2)    { width: 50px; height: 50px; background: yellow; position: fixed;//固定在浏览器中,不移动 right: 0; bottom: 0;    }

4.z-index

z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。 当元素之间重叠的时候, z-index 较大的元素会覆盖较小的元素在上层进行显示。(类似图形)默认是0,最高是999,设置显示次序

9.动画

less:是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

5.继承

css父类设置的元素,子类也会继承。

如设置ul,那么ul下面的li也会有相同的元素

CSS学习笔记
思维导图:
在这里插入图片描述