![](https://img-blog.csdnimg.cn/bc042517024546ec89172fa04f6f81dc.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 60
CSS全称是Cascading Style Sheets,中文翻译就是层叠样式表,这是一种用来表现HTML或者XML等文件样式的计算机语言,拥有对网页对象和模型样式编辑的能力。
曹莓奶昔
大三程序媛一枚,记录学习日常,欢迎大家一起来学习交流吖~
展开
-
CSS3新增特性:选择器、盒子模型、其他属性
1. CSS3现状新增的CSS3特性有兼容性问题,ie9+才支持 移动端支持优于pc端 不断改进中 应用相对广泛2. 新增选择器2.1 属性选择根据元素特定属性来选择元素,不用借助与类或者是ID选择器选择符 简介 E[att] 选择具有att属性的E元素 E[att"val"] 选择att属性且att属性值为val的E元素 E[att^="val"] 匹配att属性且值以val开头的E元素 E=[att$="val"] 匹配att属性且值原创 2022-03-31 15:57:43 · 494 阅读 · 0 评论 -
前端基础:CSS初始化
不同浏览器对标签的默认值是不同的,为了消除不同的浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS初始化。(css初始化是指重设浏览器的样式)每个网页都必须首先进行CSS初始化...原创 2022-03-30 23:30:18 · 1583 阅读 · 0 评论 -
CSS进阶:常见布局技巧
1. margin负值的运用两个盒子浮动,中间是没有缝隙的,导致两个边框放在一起会加宽边框,解决方法:让每个盒子margin往左侧移动-1px正好压住相邻盒子边框margin-left: -1px;鼠标经过某个盒子时,提高盒子的层级即可(如果没有定位,则加定位(position: relative;保留位置),如果有定位,则加z-index)2. 文字围绕浮动元素3. 行内块的巧妙运用4. CSS三角强化...原创 2022-03-28 22:59:05 · 577 阅读 · 0 评论 -
CSS进阶:vertical-align垂直居中对齐、溢出的文字省略(网页常用)
1. vertical-align属性vertical-align属性应用场景:经常用于设置图片或者表单(行内元素)和文字垂直对齐官方解释:用于设置一个元素的垂直对齐方式,但是它只针对行内元素或者行内块元素有效语法:vertical-align: baseline| top| middle| bottom;属性值 说明 baseline 默认,元素放置在父元素的基线上 top 元素的顶端与行中最高元素的顶端对齐 moddle 元素在父元素的中部原创 2022-03-24 22:34:20 · 2337 阅读 · 0 评论 -
CSS进阶:用户界面样式
目录1. 含义2. 鼠标样式cursor3. 取消表单轮廓 outline4. 防止表单域拖拽 resize1. 含义界面样式,就是更改用户操作样式,提高用户体验更改用户鼠标样式 表单轮廓 防止表单域拖拽2. 鼠标样式cursor设置或者检索在对象上移动的鼠标指针采用何种系统预定义的光标形状,通常配合JS使用li {cursor: pointer; }属性值 说明 default 小白,默认 pointer 小手.原创 2022-03-24 16:09:03 · 134 阅读 · 0 评论 -
CSS进阶:三角写法和京东三角案例实现
目录1.三角形由来2. 三角的写法3. 京东三角案例3.1 分析3.2 代码3.3 效果图1.三角形由来设置一个,width和height为0,上下左右颜色不同的边框代码如下: .box1 { width: 0; height: 0; border-top: 10px solid pink; border-right: 10px solid rgb(247...原创 2022-03-24 15:30:36 · 173 阅读 · 0 评论 -
CSS进阶:字体图标的加载和使用(开发常用)
目录1. 字体图标的产生2. 字体图标的优点3. 字体图标和精灵图的总结4. 字体图标的下载5. 字体图标的引入6. 字体图标的追加1. 字体图标的产生字体图标的使用场景:主要用于在网页中通用、常用的一些小图标字体图标iconfont可以解决精灵图的缺点问题,展示的是图标,本质属于字体2. 字体图标的优点轻量级:一个图标字体比图片小 灵活性:本质是文字,随意改变颜色、阴影、透明效果等 兼容性:几乎支持所有的浏览器使用注意:字体图标不能代替精灵图技术,只是原创 2022-03-24 13:30:44 · 1286 阅读 · 0 评论 -
css进阶:精灵图的使用、实现用精灵图拼出名字
1.精灵图的用途为了有效地减少服务器接收和请求的次数,提高网页的加载速度,因此产生了CSS精灵技术(也称CSS Sprites、CSS雪碧)核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只要一次请求就可以了2. 精灵图(sprites)的使用2.1 原理使用精灵图核心:精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图片中 这个大图片也称sprites精灵图或者雪碧图 移动背景图位置,此时可以background-position 移动的原创 2022-03-23 23:27:48 · 2867 阅读 · 2 评论 -
前端基础:CSS元素的显示与隐藏
1. 元素的显示与隐藏类似网站广告,当我们点击关闭就不见,但是我们重新刷新页面,就会重新出现本质:让一个元素在页面中隐藏或者显示出来1.1display 显示隐藏display属性用于设置一个元素如何显示display:none;隐藏对象 display:block;除了转换块级元素外,同时还显示元素1.2 visibility 显示隐藏1.3 overflow 溢出显示隐藏...原创 2022-03-23 15:18:43 · 2285 阅读 · 0 评论 -
前端基础:CSS网页布局总结
用盒子模型。HTML标签是一个盒子用CSS浮动、定位可以让盒子排列成网页一个完整的网页由标准流、浮动、定位一起布局1. 标准流盒子上下排列或者左右排列,垂直的块级盒子显示就是用标准布局2. 浮动多个块级元素一行显示或者左右对齐盒子,多个盒子水平显示用浮动布局3. 定位最大的特点是由层叠的概念,让多个盒子前后层叠压来显示,如果元素自由在某个盒子内移动就用定位布局...原创 2022-03-22 23:22:04 · 146 阅读 · 0 评论 -
前端基础:用CSS定位实现-淘宝焦点图案例
目录1. 页面整体布局2. 代码3.实现效果1. 页面整体布局大盒子类名:tb-promo (淘宝商业广告) 大盒子里放一张图片 用链接把两个按钮放起来,左箭头prev ,右箭头next(定位实现) 底部小圆点用ul做,类名 promo-nav注意:如果有一个盒子既有left(top)也有right属性(bottom),则默认会执行left(top)注意选择器权重问题2. 代码<!DOCTYPE html><html lang=原创 2022-03-22 23:23:54 · 606 阅读 · 0 评论 -
前端基础:CSS的定位position(开发常用)
使用场景:盒子固定在屏幕的某个位置、盒子自由移动位置压住其他的盒子原创 2022-03-21 13:57:33 · 1505 阅读 · 0 评论 -
前端基础:CSS文本属性(常用)
目录1. 文本颜色2. 对齐文本3. 装饰本文4. 文本缩进5. 行间距6. 总结CSS Text(文本)属性可定义文本的外观,如颜色、对齐方式、装饰、缩进、行间距等1. 文本颜色color属性可以定义文本颜色p { color: red; }表示 属性值 颜色值 red,green,red等 十六进制 #FF00000,#FF66000等 RGB代码 rgb(255,...原创 2022-03-20 18:49:08 · 3074 阅读 · 0 评论 -
前端基础:CSS字体属性
css fonts(字体)属性用于字体系列、大小、粗细、文字样式(如斜体)。1. 字体系列css使用font-family属性定义字体。P{ font-family: "微软雅黑/Microsoft YaHei";}各个字体之间必须用英文的逗号隔开 空格隔开的多个单词组成的字体,加引号 尽量使用系统默认字体,保证在任何用户的浏览器中都能显示 最常见的字体:body { font-family:'Microsoft YaHei',tahome,arial,' H...原创 2022-03-18 16:46:06 · 2091 阅读 · 0 评论 -
前端基础: CSS基础的选择器
1. 基础选择器作用:根据需求把不同标签选出来,简单来说就是选择标签的作用div { color: black; font-size: 24px;}这段css代码的意思是:选择器找到所有的div标签 设置div标签的字体颜色为黑色,字号为24像素2. 选择器分类选择器分为基础选择器和复合选择器基础选择器由单个选择器组成,它包括:标签选择器、类选择器、id选择器、通配符选择器这四种 ...原创 2022-03-18 16:23:15 · 178 阅读 · 0 评论 -
前端基础:CSS介绍,语法规范,代码格式
1. CSS简介主要使用场景就是布局页面美化页面的。CSS是层叠样式表的简称,也称CSS样式表或者级联样式表,它是一种标记语言。CSS作用:设置HTML页面的文本内容(字体,大小,对齐方式)、图片的外形(宽高、边框样式)以及版面的布局和外观显示样式。2. CSS语法规范CSS由选择器以及一条或者多条声明构成选择器{属性:值 属性:值};选择器是用于指定css样式的HTML标签,花括号内是对象设置的具体样式。属性和属性值以“键值对”的形式出现3. css代码风格...原创 2022-03-18 12:13:30 · 256 阅读 · 0 评论 -
前端CSS属性规范书写
css属性遵循以下顺序:1. 布局定位属性display、position、float、clear、visibility、overflow2. 自身的属性width、height、margin、padding、border、background3. 文本属性color、font、text-decoration、text-align、verttical-align、white-space、break-work4. 其他属性(CSS3)content、cursor.原创 2022-03-12 18:20:30 · 249 阅读 · 0 评论 -
前端基础:CSS清除浮动的原因、本质和方法
目录1.清除浮动的原因2.清除浮动的本质3. 语法4. 清除浮动的方法4.1额外标签法(隔墙法)4.2父级添加overflow属性(重点)4.3 父级添加after属性(重点)4.4父级添加双伪元素(重点)5. 清除浮动总结5.1 三原因5.2 四方法1.清除浮动的原因网页是高度是无限的(比如淘宝的页面是有无数的产品可以浏览的),要达到父级元素的高度要由子元素撑开的效果,这就要清除浮动。 子级元素是浮动的 浮动元素是不占位置...原创 2022-03-11 17:03:03 · 879 阅读 · 0 评论 -
前端基础:CSS 浮动(float)-普通流、浮动、定位、布局的综合搭配(重点)
关于三种网页的布局:普通流、浮动、定位的学习,重点介绍了浮动和普通流搭配浮动的布局,标准流的两个注意点,并且完成一个小米手机布局的网页练习。原创 2022-03-10 21:27:00 · 711 阅读 · 0 评论 -
自学前端开发基础路线
前端小白的自学的路线原创 2022-03-07 13:45:58 · 194 阅读 · 1 评论 -
CSS3的新增样式:圆角边框、盒子阴影、文字阴影
关于css3新增样式圆角边框、盒子阴影和文字阴影的原理、语法及其使用的效果。原创 2022-03-09 00:36:00 · 252 阅读 · 0 评论