CSS
文章平均质量分 53
CSS基础
Alan_Lowe
世上没有白走的路,每一步都算数!——狂神
展开
-
HTML、CSS学习总结
HTML、CSS学习总结暑假的网页学习终于过完了一个小的阶段,但是其实学习的进度是特别慢的,因为平时也有去玩,打游戏,打打ACM暑期多校(虽然大部分的场次都是签到然后光速罚坐,甚至还签不上到,被自己菜哭),试着用java写程序,因为以前一直都是用C++去参加比赛,但是最近想着去试试Java。HTML和CSS的话,学的都是一些简单常用的东西,说实话学的还是挺认真的,博客也写了40多篇了,但是学的不彻底,而且感觉很多东西学完就忘。本来打算7月底之前学完HTML和CSS的,这算是拖了10天了,明天开始准备学原创 2021-08-10 01:17:19 · 276 阅读 · 3 评论 -
CSS|重叠元素z-index
CSS|重叠元素z-index元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素,z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面),一个元素可以有正数或负数的堆叠顺序。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>z-index</title> <style> /*z-原创 2021-08-10 00:58:02 · 225 阅读 · 0 评论 -
CSS|Position
CSS|Position1.分类position属性指定了元素的定位类型。它一共有5个值:staticrelativefixedabsolutesticky2.static定位HTML元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到top,bottom,left,right影响。3.fixed定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。<!DOCTYPE html><html lang="en">原创 2021-08-10 00:43:21 · 100 阅读 · 0 评论 -
CSS|Overflow
CSS|Overflow1.内容溢出我们在一个块元素内放置很多内容的话,这个块元素可能会容纳不了这些内容,如:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Overflow</title> <style> div{ width: 300px; height: 100px;原创 2021-08-09 23:50:59 · 90 阅读 · 0 评论 -
CSS|浮动float
CSS|浮动float1.文本环绕图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浮动</title> <style> div{ width: 600px; border: 10px solid blue; background-image: linear-gra原创 2021-08-09 23:07:10 · 83 阅读 · 0 评论 -
CSS|display、visibility
CSS|display、visibility1.隐藏元素隐藏元素可以用display,也可以用visibility;但是它们存在区别,display隐藏是直接让这个元素消失,而visibility隐藏是让元素看不见,但是在网页当中还实际的占据着它的位置。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>display</title&原创 2021-08-09 18:49:07 · 193 阅读 · 0 评论 -
CSS|盒子阴影
CSS|盒子阴影使用box-shadow可以设置盒子的阴影,它有六个参数,其中前两个是必选的box-shadow: 阴影的水平位置 阴影的垂直位置 模糊距离 阴影的尺寸阴影的颜色 外部或内部<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子阴影</title> <style> div{原创 2021-08-01 13:53:45 · 2604 阅读 · 0 评论 -
CSS|圆角边框
CSS|圆角边框设置边框的角,使用border-radius它一共有四个参数,分别代表左上角、右上角、右下角、左下角的曲折程度;如果只写三个参数,那么分别代表左上角、右上角和左下角、右下角;如果只写两个参数,那么分别代表左上角和右下角、右上角和左下角;如果只写一个参数,那么代表四个角<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g原创 2021-08-01 13:29:55 · 257 阅读 · 0 评论 -
CSS|内外边距
CSS|内外边距设置外边距和内边距:外边距:margin-top 上margin-right 右margin-bottom 下margin-left 左内边距:padding-top 上padding-right 右padding-bottom 下padding-left 左也可以使用margin或者padding,它们可以有2,3或4个参数:margin:上边距,右边距,下边距,左边距(顺时针)margin:上边距,左右边距,下边距margin:上下边距,左右边距原创 2021-07-31 11:27:59 · 947 阅读 · 0 评论 -
CSS|盒子模型
CSS|盒子模型1.什么是盒子模型我们随便打开一个网页检查元素:可以看到图中右上角,有颜色部分就是一个盒子模型,包括:Margin,外边距,就是盒子本题和外部元素的距离,是透明的(类似于行间距)Border,边框,就是盒子的边框,围绕着盒子Padding,内边距,清除内容周围的区域,就是实际上的内容和边框直接的距离Content,盒子的内容,显示文本等信息2.实例<!DOCTYPE html><html lang="en"><head>原创 2021-07-31 00:26:04 · 71 阅读 · 0 评论 -
CSS|径向渐变
CSS|径向渐变使用background-image: radial-gradient(渐变中心的形状(circle原型,ellipse椭圆),blue,red……)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>径向渐变</title> <style> div{ width: 400px原创 2021-07-30 19:13:12 · 175 阅读 · 0 评论 -
CSS|线性渐变
CSS|线性渐变background-image: linear-gradient(方向,颜色……)其中方向可以用tight,left,top,bottom或者其组合方式进行:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>线性渐变</title> <style> div{原创 2021-07-30 18:59:21 · 121 阅读 · 0 评论 -
CSS |背景图像
CSS |背景图像1.border先设置一个基础结构,并且使用border设置边框的格式:/*宽度为500px高度为500pxborder:边框的宽度 边框的样式 边框的颜色*/div{ width: 500px; height: 500px; border: 2px solid #FF0000; background-image: url("../resource/image/img.png");}<!DOCTYPE html><原创 2021-07-30 18:35:31 · 113 阅读 · 0 评论 -
CSS|列表样式
CSS|列表样式我们可以看一下淘宝的左侧有一个导航框,如果我们要做一个这样的导航框,应该怎么样去操作呢?1.div我们看到图中的块是只占了网页的左侧一小部分,可以使用div来设置它占用的宽度#nav{ width: 200px; background-color: #b5dcff;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &原创 2021-07-30 17:39:20 · 420 阅读 · 0 评论 -
CSS|文本阴影
CSS|文本阴影<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文本阴影</title> <style> h1{ /*文本阴影,参数分别为:水平距离,垂直距离,模糊距离,阴影颜色*/ text-shadow: 5px 5px 2px aqua; } </styl原创 2021-07-27 20:47:15 · 206 阅读 · 0 评论 -
CSS|超链接伪类
CSS|超链接伪类CSS:/*表示超链接访问前的样式*/a:link{ color: #000000;}/*鼠标悬停时的样式*/a:hover{ color: blue; font-size: 20px ;}/*鼠标点击不放时的样式*/a:active{ color: yellow;}/*访问过后的样式*/a:visited{ color: red;}HTML:<!DOCTYPE html><html lang="原创 2021-07-27 20:35:07 · 332 阅读 · 0 评论 -
CSS|文本样式
CSS|文本样式1.颜色颜色用RGB(三原色:RED、GREEN、BLUE)表示,可以直接选择某个颜色,也可以使用#加6位16进制数值来表示:前两位表示红色的值,中间两位是绿色,最后两位是蓝色。.style1{ color: #FF0000;}.style2{ color: #00FF00;}.style3{ color: blue;}<!DOCTYPE html><html lang="en"><head>原创 2021-07-27 16:42:12 · 110 阅读 · 0 评论 -
CSS|字体样式
CSS|字体样式1.span标签、字体大小 font-size一半使用span标签来修饰需要被着重表示的文字内容,可以在span标签内添加一个id属性,利用id选择器来修改需要着重内容的样式:#style1{ font-size: 30px;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>字体样式</title&原创 2021-07-27 15:59:25 · 160 阅读 · 2 评论 -
CSS|属性选择器
CSS|属性选择器如果我们有四个a标签,并且现在样式被初步定义了:a{ float: left; display: block; border-radius: 10px; background-color: aqua; width: 50px; height: 50px; text-align: center; font:20px/50px Arial;}<!DOCTYPE html><html lang="en原创 2021-07-27 10:23:59 · 255 阅读 · 2 评论 -
CSS|结构伪类选择器
CSS|结构伪类选择器CSS文件:/*结构伪类选择器*//*选中ul的第一个li*/ul li:first-child{ background-color: aqua;}/*选中ul的最后一个li*/ul li:last-child{ background-color: red;}/*选中当前元素得父亲元素得第n个子元素并且该子元素需要时当前元素类型*/p:nth-child(2){ background-color: blueviolet;}原创 2021-07-26 01:55:21 · 145 阅读 · 0 评论 -
CSS|层次选择器
CSS|层次选择器1.分类层次选择器分为四种类型:后代选择器子选择器相邻兄弟选择器通用选择器我们先构建一个网页:body内放5个段落,第五个段落中放一个无序列表:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>层次选择器</title></head><body><p&原创 2021-07-25 19:27:26 · 3425 阅读 · 0 评论 -
CSS|id选择器
CSS|id选择器1.简介id选择器必须保持全局唯一,不能复用声明方式是#加上名称#Style1{ color: red;}选择器优先级: id选择器 > 类选择器 > 标签选择器2.实例:CSS文件:/*id选择器id选择器必须保持全局唯一(不能复用)声明方式是#加上名称选择器优先级:id > class > 标签*/#Style1{ color: red;}HTML文件:<!DOCTYPE html><原创 2021-07-25 14:59:47 · 344 阅读 · 0 评论 -
CSS|类选择器
CSS|类选择器1.简介类选择器的声明是一个’.'加上类名,大括号内写上样式,如:.style1{ color: red; background-color: aquamarine; border-radius: 15px; text-align: center;}这样的话,style1这个类就把字体颜色改为了red,背景颜色改为了aquamarine……使用的时候只需要在标签中添加上class属性即可:<h1 class="style1">标题原创 2021-07-25 14:46:11 · 746 阅读 · 1 评论 -
CSS|标签选择器
CSS|标签选择器1.简介选择器的作用是选择页面上的某一个或者某一类元素基本选择器:标签选择器类选择器id选择器2.标签选择器CSS文件:/*标签选择器会选择到页面上所有的该标签元素*/h1{ color: red; background-color: aqua; border-radius: 10px;}HTML文件:<!DOCTYPE html><html lang="en"><head> &原创 2021-07-25 14:26:15 · 3353 阅读 · 0 评论 -
CSS|导入方式
CSS|导入方式1.行内样式之前html的学习当中已经用到过style了,就是在标签元素中,编写一个style属性:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>导入方式</title></head><body><!--行内样式:在标签元素中,编写一个style属性-->&l原创 2021-07-25 13:50:15 · 125 阅读 · 4 评论 -
CSS|快速入门及优势
CSS|快速入门及优势1.入门<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>快速入门</title><!--规划<style> 可以编写css的代码语法:选择器{ 声明1; 声明2; 声明3;}--> <style> h1{原创 2021-07-25 12:08:59 · 114 阅读 · 0 评论 -
CSS|简介
CSS|简介1.什么是CSS?CSS指层叠样式表(Cascading Style Sheets)样式定义如何显示HTML元素样式通常存储在样式表中外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一个2.发展史CSS1.0CSS2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单CSS2.1 浮动,定位CSS3.0 圆角,阴影,动画……人生没有白走的路,每一步都算数!...原创 2021-07-24 23:34:52 · 91 阅读 · 0 评论 -
HTML|内联CSS-文本对齐方式
HTML|内联CSS-文本对齐方式可以使用text-align属性设置文本的水平方向对齐方式水平方向:left左对齐right右对齐center居中对齐justify两端对齐<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>内联CSS-文本对齐方式</title></head><body&g原创 2021-07-23 22:24:27 · 632 阅读 · 0 评论 -
HTML|内联CSS-背景和字体
HTML|内联CSS-背景和字体CSS (Cascading Style Sheets) 用于渲染 HTML 元素标签的样式。CSS 是在 HTML4 开始使用的,是为了更好的渲染 HTML 元素而引入的。CSS 可以通过以下方式添加到HTML中:内联样式:在HTML元素中使用"style" 属性内部样式表:在HTML文档头部 head>区域使用style>元素来包含CSS外部引用:使用外部CSS文件内联样式当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样原创 2021-07-23 21:15:30 · 1208 阅读 · 2 评论 -
CSS|学习步骤
CSS|学习步骤曾经励志要搞算法的我学完了HTML基础,今天开始要准备学习CSS了,先写一下要学习的基础内容:CSS是什么CSS怎么用(快速入门)CSS选择器(重难点)美化网页(文字,阴影,超链接,列表,渐变……)盒子模型浮动定位网页动画(特效效果)因为还一点不了解CSS,先跟着狂神走着吧,大概步骤就这样,后续有补充的,直接补充就行了。fighting!!人生没有白走的路,每一步都算数!...原创 2021-07-22 23:15:33 · 112 阅读 · 0 评论