CSS学习笔记
猪花社
2020年开始踏入学习IT之路,博客即笔记
展开
-
P1.CSS简单介绍及基础入门
1.什么是CSS1.CSS是什么2.CSS怎么用(快速入门)3.CSS选择器(重点+难点)4.美化网页(文字,阴影,超链接,列表,渐变)5.盒子模型6.浮动7.定位8.网页动画(特效效果)推荐网站菜鸟教程1.1什么是CSSCascading Sryle Sheet 层叠级样式表CSS:表现(美化网页)字体,颜色,边距,高度,宽度,定位,浮动……1.2 发展史CSS1.0CSS2.0 DIV(块)+CSS.HTML与CSS结构分离思想,网页变得简单,SEOCSS2原创 2020-08-04 16:22:06 · 929 阅读 · 1 评论 -
P2.CSS的三种基础选择器
CSS选择器作用:选择页面上的某一个或者某一类元素(定位作用)基本选择器:标签选择器类选择器(class)id选择器1.标签选择器格式为: <style> 标签元素{ /*标签选择器,会选择到页面上的所有的标签元素*/ color:red; } </style>2.类选择器格式:<style> .class的名称{} 好原创 2020-08-04 17:20:25 · 410 阅读 · 0 评论 -
P3.CSS高级选择器1(层次选择器)
层次选择器结构关系图层次选择器总共有四种选择器分别是:后代选择器:在某一元素后面,(包含后代所有)子代选择器:一代相邻选择器:该元素被选中后的相邻下一个通用选择器:该元素以及向下的所有同类元素后代选择器在这里插入代码片...原创 2020-08-05 11:00:13 · 155 阅读 · 0 评论 -
P4.CSS高级选择器2(结构伪类选择器)
结构伪类选择器定义:结构伪类选择器是用来处理一些元素特殊的效果常见几个选择器属性:first-child:定位到某元素的第一个子元素last-child:定位到某元素的最后一个元素原创 2020-08-05 11:36:04 · 162 阅读 · 0 评论 -
P5.CSS高级选择器3(属性选择器)
属性选择器好处:将id属性和class属性选择器结合格式有两种分别是:标签元素名[属性名]{}标签元素名[属性名=属性值] 注意:class*=""为*=并且带引号属性选择器中常用的几个正则表达式通配符:=绝对等于唯一(适合id)*=包含(适合class)^=以这个元素开头$=以这个元素结尾举例图:...原创 2020-08-05 11:54:35 · 161 阅读 · 0 评论 -
P6-1.CSS的基础美化网页元素
字体样式span标签:重点突出的字,使用span套起来font-family:字体类型font-size:字体大小(px像素单位em间距单位)font-weight:字体粗细color:字体颜色汇总表示:font:oblique(字体风格) bold(粗细) 20px(字体大小)/50px(行高) “楷体”(字体类型)文本样式1. 颜色2. 文本对齐方式3. 首行缩进4. 行高5. 装饰6. 图片文本水平对齐color颜色1.单词表示2.RGB 0~F(red br原创 2020-08-05 16:15:00 · 181 阅读 · 0 评论 -
P6.2、CSS基础_超链接伪类和文本阴影
超链接伪类a:hover{}鼠标悬浮时的状态显示a:active{}鼠标单击不放时的状态显示原创 2020-08-06 16:11:35 · 149 阅读 · 0 评论 -
P6.3、CSS基础_列表美化
列表使用list-style设置列表符号常用几个元素:none:去掉原点circle:空心圆decimal:数字square:正方形原创 2020-08-06 17:19:48 · 139 阅读 · 0 评论 -
P6.4、CSS基础_背景及渐变
一、 背景背景颜色backgroud-color:red背景图片background-image:url(…/地址);注意:默认图片平铺方式为repeat(铺满)图片平铺方式 background-repeat:repeat-x(水平平铺) background-repeat:repeat-y(垂直平铺) background-repeat:no-repea(不平铺显示一个)图片定位background-position:0px(水平位置),0px(垂直位置)综合原创 2020-08-09 11:24:11 · 108 阅读 · 0 评论 -
P7、CSS基础_盒子模型(重要)
盒子模型border:边框margin:外边距padding:内边距盒子大小计算方式:margin+border+padding+内容宽度一、边框borderborder有三部分组成:粗细(单位px)样式(分为dashed-虚线 solid-实线)颜色例:border:2px solid red二、外内边距margin与padding**内外边距(妙用居中元素):组合使用时:顺时针计算,外边距举例: 1. margin:1px 2px 3px 4px (原创 2020-08-10 15:42:27 · 120 阅读 · 0 评论 -
P8、CSS基础_display与浮动
一、回顾元素分类:块级元素h1~h6 、p、div、列表……行内元素span、a、img、strong……块级元素可以包含行内元素,但行内元素不能包含块级元素二、 displaydisplay:block 将行内元素 转换为块元素display:line 将块元素转换为行内元素display:line-block 既保持块元素特性又能不独占一行(常用)display:none 消失内容display常用于制作导航刊三、 浮动float左右浮动float:leftfl原创 2020-08-13 11:59:19 · 121 阅读 · 0 评论 -
P.9、CSS基础_定位与z-index
相对定位、绝对定位、固定定位、z-index一、相对定位 position:relative相对于原来的位置进行偏移,仍然在标准文本流中,原来的位置仍然保留语法:position:relative;positon:relative;(相对定位)向右移动: 向左移动:left:20px; &原创 2020-08-14 10:30:59 · 151 阅读 · 0 评论