CSS

HTML+CSS+JavaScript

结构+表现+交互

什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页——字体，颜色，边距，宽高，背景，网页浮动）

语法

选择器{

声明1;

声明2;

声明3;

}

三种导入方式

优先级：就近原则

 <head><meta charset="utf-8" /><title></title><!--内部样式：规范 <style>可以编写CSS代码</style>--><<style>h1{color: red;}</style><!--外部样式，通过链接，推荐--><link rel="stylesheet" href="css/第一个CSS.css" /></head><body><!--行内样式，内容表现黏在一起，不推荐--><h1 style="color: red;">标题</h1></body>

CSS的优势：

内容和表现分离
网页结构表现统一，可以实现服用
样式十分丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录！

拓展：外部样式的两种写法

1. 连接式：HTML
2. 导入式：CSS2.1特有的  @import url("css/style.css");

选择器

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

基本选择器

标签选择器
class选择器
id选择器

优先级：id选择器>class选择器>标签选择器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>/*标签选择器会选择页面上所有的这个标签*/h1{color: #FF0000;background: green;border-radius: 24px;}p{font-size: 90px;}/*类选择器，.class的名称  可以跨标签*/.carmine{color: purple;}/*id选择器，#id的名称  必须保证全局唯一 */#zy{color: blueviolet;}</style></head><body><h1 class="carmine">学java</h1><h1 class="carmine">学java</h1><h1 id="zy">学java</h1><p>听课</p></body>
</html>

层次选择器

后代选择器：在某个元素的后面
```
           body p{background: red;}
```
子选择器：一代，儿子
```
         body>p{background: red;}
```

相邻兄弟选择器一个，同辈

         /*相邻兄弟，只有一个（向下）*/          .active +p{background: red;}

通用选择器向下，同辈
```
            /*通用选择器，当前选中元素向下的所有兄弟*/.active ~p{background: red;}
```
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q9Vw6FDi-1612868362707)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210208100036832.png)]

结构伪类选择器

伪类：条件下过滤；特效

         /*ul的第一个子元素*/ul li:first-child{background: green;}/*ul的最后一个子元素*/ul li:last-child{background: red;}/*选中p1：先定位到父级元素，选中子元素的第三个*/p:nth-child(3){background: gray;}/*选中p1：先定位到父级元素，选中p元素的第二个*/p:nth-of-type(2){background: yellow;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Tvhz2eP-1612868362715)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210208095234052.png)]

属性选择器（常用）

         /*a标签存在id属性的元素*//*a[属性名]*/a[id]{background: yellow;}/*a[属性名=属性值（正则）]*/a[id=first]{background: green;}/*a[属性名*=包含的值]。选中class中包含links的*/a[class*="links"]{background: red;}/*选中herf中以http开头的*/a[href^="http"]{background: yellowgreen;}/*选中href中以pdf结尾的*/a[href$="pdf"]{background: gold;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iDkzDtOL-1612868362717)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210208102054483.png)]

美化网页元素

span标签：突出重点的字（约定俗成）

div标签：一个区域nav

字体样式

         /* 字体 颜色 字号 粗体*/body{font-family:"arial black" "微软雅黑";color: brown;}h1{font-size: 50px;}.p1{font-weight: bolder;}/*也可以放在一起写斜体 细体 25px字号 楷体*/.p2{font: oblique lighter 25px "楷体";                              }

文本样式

颜色 color：rgba()
对齐方式 text-align: center;
首行缩进 text-indent: 2em;
行高 line-height: 100px; 单行文字上下居中 line-height=height
装饰（下划线） text-decoration: underline;
文本图片水平对齐 vertical-align: middle;

         /**     颜色 RGB 0~FRGBA A：0~1text-align ： 排版text-indent: 2em; 段落首行缩进行高与块的高度一致，可以居中text-decoration： 下划线* */h1{color: rgba(255,255,0,0.9);text-align: center;}.p1{text-indent: 2em;text-decoration: underline;}.p2{background: blue;line-height: 100px;height: 100px;}/*水平对齐*/img,span{vertical-align: middle;}

超链接伪类

         /*默认颜色*/a{text-decoration: none;color: black;}/*鼠标悬停状态（重点）*/a:hover{color: orange;font-size: 30px;}/*鼠标按住状态*/a:active{color: greenyellow;}

阴影

         /* 阴影 ：颜色、水平偏移、垂直偏移、偏移半径*/#price{text-shadow: lightblue 10px 10px 2px;}

列表样式

/*ul li*/
/*list-style: none; 去掉圆点/数字  circle 空心圆 decimal 数字* */
ul li{height: 30px;list-style: none;text-indent: 1em;
}

背景图片

         div{width: 700px;height: 500px;border: 1px solid red;background-image: url("img/1.jpg");}/*水平平铺*/.d1{background-repeat: repeat-x;}.d2{background-repeat: repeat-y;}.d3{background-repeat: no-repeat;}

            .title{font-size: 20px;font-weight: bold;text-indent: 1em;line-height: 30px;/*背景： 颜色 图片 平铺 图片位置*/background: red url(../img/1.jpg) no-repeat 200px 10px;}

            /*Grabient渐变色*/background-color: #0093E9;background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qP9uSJGQ-1612868362719)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210208163103745.png)]

     /*初始化：默认效果都去掉*/body,h2,ul,li{margin: 0;padding: 0;}

margin：外边距

             /*外边距的妙用：上下为0 左右自动——实现居中*/margin: 0 auto;

border：边框

     /*border：粗细 样式 颜色 */#app{width: 300px;border: 1px solid red;}div:nth-of-type(1) input{border: 3px dashed black;}

padding：内边距

元素大小=padding+margin+border+内容宽度

圆角边框

         /*顺时针：左上 右上   右下 左下*/div{width: 100px;height: 100px;border: 10px solid red;border-radius: 20px 50px 10px 5px;    }

阴影

     /*margin：0 auto居中的前提外面有块元素，块元素固定宽度*/img{margin: 0 auto;border-radius: 100px;box-shadow: 10px 10px 100px yellow;}

浮动

display

     /*block 块元素inline 行内元素inline-block 是块元素，但是可以内联，在一行！*/div{width: 100px;height: 100px;border :1px solid red;display: inline;}span{width: 100px;height: 100px;border :1px solid red;display: inline-block;}

也是一种实现行内元素排列的方式，方向不可控，但是很多情况都使用float

float&clear

         /*float:left/right 独立于下面的层，浮动在左侧、右侧clear：both/left/right 两侧都不允许浮动*/div{float: right;clear:  both;}

父级边框塌陷

问题描述：float之后，元素不在父元素内。

解决方案：

增加父级元素的高度（太low，元素高度修改后不适应）
漂浮元素块之后加一个div标签，清除浮动。（空的div代码不合适）
```
         <div class="clear"></div>.clear{clear: both;margin: 0;padding: 0;}
```

overflow（多余部分会被切除）

在父级元素中增加一个 overflow:hidden;

在父类后加一个after（代码实现div，避免手动写✔）

            #father:after{content: '';display: block;clear: both;}

定位

相对定位

相对于原来的位置移动（原位置也保留），仍然在标准文档流中

         #first{background-color: firebrick;border: 1px solid red;/*相对定位，相对于自己原来的位置进行偏移top距离上面-20，向上移*/position: relative;top: -20px;left: 20px;}

绝对定位

没有父级元素定位的前提下，相对于浏览器定位
父级元素 position: relative; 相对于父级定位

         #second{background-color: firebrick;border: 1px solid red;/*绝对定位应用：淘宝首页购物栏*/position: absolute;right: 30px;top: -10px;}

固定定位

         #third{background-color: firebrick;border: 1px solid red;/*固定定位,上下滑动也不改变位置应用：返回顶部*/position: fixed;right: 0;bottom: 0;}

z-index

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NlpSizoy-1612868362722)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210209162347231.png)]

图层：z-index默认是0，最高无限制（有浮动才有层级）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="css/zindex.css" /></head><body id="content"><div><ul><li><img src="img/background.png" alt="" /></li><li class="tipText">学习微服务</li><li class="tipBg"></li><li>时间：2099-01-01</li><li>地点：月球一号基地</li></ul></div></body>
</html>

#content{width: 700px;padding: 0;margin: 0;overflow: hidden;font-size:12px;line-height: 25px;border: 1px #000000 solid;
}
ul,li{padding: 0;margin: 0;list-style: none;
}
/*父级元素相对定位*/
#content ul{position: relative;
}
/*浮动*/
.tipText, .tipBg{position: absolute;width: 612px;height: 25px;top: 238px;
}
.tipText{color: white;/*0是最底层，文字显示在前面*/z-index: 999;
}
.tipBg{background: black;/*给背景加一个透明度*/opacity: 0.5;
}

总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fhehRrbk-1612868362723)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210209183100570.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WEGBz2Di-1612868362724)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210209175545142.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MtunrJIv-1612868362725)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210209182931986.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tfmV4I10-1612868362726)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210209182951608.png)]

三天速成前端——CSS相关推荐

第三次网页前端培训（CSS）
1. 视频链接 [优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili2 2. 教程链接菜鸟教程 - 学的不仅是技术, ...
WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器直接选择器组合选择器分组选择器也叫并集选择器属性选择器伪类选择器伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
二：前端css，即选择器
前端css: 1,css 的引入方式 2,css中选择器 1.基本选择器: /*标签选择器*/ /*类标签选择器,.类属性值重点知识*/ /*id选择器,#+id值,#id的值,不是id,重点知识* ...
咸鱼前端—CSS初识
咸鱼前端-CSS初识 CSS的发展历程 CSS 网页的美容师 CSS初识引入CSS样式表(书写位置) CSS样式规则 CSS的发展历程从HTML被发明开始,样式就以各种形式存在.不同的浏览器结合它 ...
前端CSS实现八卦图，三角形
浅谈前端CSS中的一个硬核属性-border 前言了解过前端的都知道,html 所有的标签都离不开border属性,Border,顾名思义,边框,给标签加个边框,就像我们生活中的窗户框子,Borde ...
黑马程序员前端-CSS练手之学成在线页面制作
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的 ...
2017年三月初大厂前端面试总结
2017年三月初大厂前端面试总结过去一个多星期,笔者(Chainn)考虑换工作,就面了一些杭州的互联网公司.先后面试了X医.X滴.X易.X为等大厂,中途还面了一些创业公司.我觉得面试不仅可以更好地认 ...
前端css弹性布局各种属性
前端css弹性布局各种属性一.基本概念 Flexbox 是 flexible box 的简称(注:意思是"灵活的盒子容器")又叫弹性布局,是 CSS3 引入的新的布局模式.它决定 ...
前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结
前端 CSS:锚伪类选择器:hover,:active,:visited;等用法总结锚伪类选择器:hover,:active,:visited;等用法总结一.什么是锚伪类在支持 CSS 的浏览器 ...

三天速成前端——CSS

CSS