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指令
引入
- 使用link标签(style外部引入) html标签
<link rel="stylesheet" href="First.css">
- 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">123234
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
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
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进行区域的划分
5.背景
- 背景颜色
- 背景图片
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.盒子
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 两侧不允许有浮动元素
父级边框塌陷的问题
原因:父级元素边框塌陷的原因是,当父元素没有设置足够的大小时,父元素的高度是由父元素中最高子元素的高度决定的。一旦子元素浮动,脱离了文档流不再占据原本的位置,父元素中没有非浮动的可见子元素,父元素的高度就会塌陷。
解决方案;
1.增加父级元素的高度:这种方式不推荐使用,太不灵活。
2.增加一个空的div标签,清除附近的浮动
3.overflow 给父元素设置overflow:hidden
/* 默认值。内容不会被修剪,会呈现在元素框之外 */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.定位
- 相对定位
原来的位置任然在标准文档流中,位置依然被保存
#first { background: cyan; border:2px red solid; position: relative;/*相对定位,相对自己原来的位置*/ top: -10px;/// 原来的位置相对于现在的位置,即现在的位置在原来的位置的上面10px left: 20px; }
- 绝对定位
绝对定位的元素不再存在于正常文档布局流中。相反,它坐在它自己的层独立于一切。
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也会有相同的元素
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也会有相同的元素
思维导图: