1、样式 1.1 行内样式 行内样式 1.2 内部样式 CSS代码写在 的 标签中 h1{color...: green; } 1.3 外部样式 <!..."可以省略; --> 1.4 CSS优先级 就近原则; 2、选择器 2.1 基本选择器 2.1.1 标签选择器 <!...设置表格单元格边框的方法 直接设置表格table属性：cellspacing="0" CSS方法1：border-collapse: collapse; 边框会合并为一个单一的边框； CSS方法2：border-spacing...:0; 表格的相邻单元格边框之间的距离为0 4.2.6 border-spacing border-spacing是CSS2的一个属性。
CSS的使用：CSS与html结合方式 1....内联样式 * 在标签内使用style属性指定css代码 * 如：hello css 2....定义css资源文件。 2...."stylesheet" href="css/a.css"> hello css hello css * 注意： * 1,2,3种方式 css...作用范围越来越大 * 1方式不常用，后期常用2,3 * 3种格式可以写为： @import "css/a.css"; 4
CSS 伪类 CSS 伪类可对 CSS 的选择器添加一些特殊效果 锚伪类： 在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态...#FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上...浮动 CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。...元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。...CSS 定位 CSS 定位（Positioning）属性允许你对元素进行定位。
一 CSS CSS是Cascading Style Sheets的缩写，层叠样式表，用来控制网页数据的显示，可以使网页的显示与数据内容分离。...二 引入方式 （1）行内式：在标记的style属性中设置CSS样式，不推荐使用。 hello world 标签中导入*.css文件。...type="text/css"> @import "myCss.css"; hello world</div
CSS前端基础 1.CSS的快速入门 2、选择器 2.4、属性选择器 3、美化网页元素 3.1、字体样式 3.2 文本样式 3.3、超链接伪类 3.4、列表 3.5、背景 1.CSS的快速入门 <!...-- 可以编写CSS的代码 语法： 选择器：{ 声明1： 声明2：...h1{ color:red; } 主标题 css...DOCTYPE html> Title 全部商品分类
介绍 CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。 CSS 可以通过以下方式添加到HTML中：内联样式、内部样式、外部引用。...（图片来自http://www.runoob.com/css/css-syntax.html） 如： p { color: #FFFFFF; background: #27ad9a; }...样式 CSS 可以通过以下方式添加到HTML中 内联样式 - 在HTML元素中使用"style" 属性 内部样式 - 在HTML文档头部 区域使用 元素 来包含CSS 外部引用...（常用的写法） 例：在css文件夹下创建mystyle.css，并使用引用 ?...css 外部样式表 效果
图片来自：https://caniuse.com/#tables 参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position http:/
block ： 设置元素为块状元素 list-item ：会把元素作为列表显示 inline-block ： inline-block既具有block的宽高特性又具有inline的同行元素特性（CSS...inline-block inline-block既具有block的宽高特性又具有inline的同行元素特性 (CSS 2.1 新增) 例： .display4 { display: inline-block...使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式， 而不会产生因为使用了table那样的制表标签所导致的语义化问题。...（多数布局都可以通过flex解决） 参考 CSS display 属性详解 有错误之处，感谢指出，接收批评
clear属性 指定一个元素是否可以在它之前的浮动元素旁边，或者必须向下移动(清除浮动) 到这些浮动元素的下面。 none：默认值。...hidden； ● display的值为table-cell、table-caption和inline-block中的任何一个； ● position的值不为relative和static； 参考 详解CSS...float属性 CSS浮动float详解 【前端Talkking】CSS系列——CSS深入理解之float浮动 https://developer.mozilla.org/zh-CN/docs/...CSS/float http://www.runoob.com/css/css-float.html 有错误之处，感谢指出，接收批评
web前端 —— 移动端知识的一些总结 个人在移动端的一些总结归纳，有新的知识点会一直更新 一.css部分 1.meta标签 移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页...，如果通过改变绝对定位的 top，或者 margin的话做出来的效果很差，很不流畅，而使用 css3的 transition、 transform或者 animation的效果将会非常棒（这一方面 IOS...，所以比如要元素居左对齐的话，还需设置 translateX 24.在移动端对 input框使用 disabled属性，会导致元素里面 value值在页面上被隐藏看不见，可以对元素使用 css3效果 pointer-event...（后台代码没做任何修改，只在我前端修改代码）。所以最后还是使用了 ?param=1这样的格式 原文：https://segmentfault.com/a/1190000003908191
往期文章 【CSS3】 float浮动与position定位常见问题（个人笔记） 如何完成响应式布局，有几种方法？...看这个就够了 详解 CSS3中最好用的布局方式——flex弹性布局（看完就会） [前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（...看完就会） CSS3 transform 2D转换之移动 旋转 缩放（详细讲解看完就会） CSS3 Z—Index 详解 CSS3 positon定位详解（通俗易懂） 目录 效果演示 代码 ----...display: block; text-align: center; color: #fff; } /* 设置动画移动盒子...然后书写动画，车的移动直接移动外边的大box盒子就好，车轱辘设置旋转动画，需要注意车来回跑动所以轱辘转动方向需要变化，我们把时长设置成一样就好， 后面用alternate属性反向结束就可以，然后用bootstrap
一、css介绍 引子：html是网页的结构，css是网页的化妆师，让网页更美观。 传智官网删除css后会变得横七竖八，加上后又变美观了，这就是css样式的魔力。...css就是给网页设置一些样式，让网页变的漂亮，更具有可读性。...css全称为Cascading Style Sheets 翻译过来叫层叠样式表 作用：设置网页的文字（大小，颜色，字体风格，对齐方式等）图片和排版等，简单点说就是给网页化妆 感知css div...DOCTYPE html> <
属于css范畴，只能引入css文件（老祖宗的区别） 2）link引入的css文件和页面同时加载，@import引入的css文件在页面加载完成后载入（加载顺序不同） 3）link引入css文件无兼容性问题...E[attr=value] 匹配含有attr属性并且值为value的E元素 eg: a[title=前端]{color:black;} 匹配含有title属性并且值为前端的a标签 3....移动端布局 一、移动端相关概念 1.屏幕尺寸 屏幕尺寸是指屏幕对角线的长度，单位为英寸，1英寸=2.54厘米 2.屏幕分辨率 屏幕分辨率是指横纵方向上的像素点数，单位为px，1个像素点=1px (这里的...1px是指物理设备上的一个像素点) 常见移动端设备屏幕分辨率： iphone6,6s,7,8 1334*750 iponee6plus,7plus,8plus 1920*1080 注：移动端设备一般为...，圣杯布局，百分比布局等)融合在一起实现移动端的屏幕适配的方法 案例：淘宝网 三、移动端相关单位 1.px 像素，相对于屏幕分辨率而言 2.em 相对于父元素字体大小放大或缩小多少倍 1em = 16px
CSS 1.css选择某一个 (CSS :first-child 选择器,CSS选择器——伪类选择器) q:请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成”rgb(255,...在 CSS1 和 CSS2 中，伪元素的使用与伪类相同，都是使一个冒号:与选择器相连。但在 CSS3 中，将伪元素单冒号的使用方法改为了使用双冒号::，以此来区分伪类和伪元素。...预处理工具 参考答案： CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。...比较 在使用 CSS 预处理器之前最重要的是理解语法，幸运的是基本上大多数预处理器的语法跟 CSS 都差不多。...； 继承的 CSS 样式不如后来指定的 CSS 样式； 在同一组属性设置中标有!
元素变换transform 移动盒子模型位置的方法 : transform: translate 中可以传入百分比值 , 百分比是相对于元素自身尺寸来说的 ; 通过定位样式移动盒子 : 相对定位 relative...; Translate 移动 相对于其它方式 移动盒子模型 的优点 : 使用 Translate 移动标签元素 , 不会影响其它元素的位置 , 不会脱标 ; Translate 只能移动块级元素 , 对于...如屏幕宽度达到小于（max-width）一个临界值的时候，显示手机移动版网页等；大于（min-width）一个临界值则显示pc端网页样式。...媒体查询特征.png 媒体类型.png 媒体运算符.png image.png BFC功能---全称：块级格式化上下文 开启BFC.png 开启BFC.png 视频：尚硅谷前端入门html+css...零基础教程，零基础前端开发html5+css3视频 【狂神说Java】CSS3最新教程快速入门通俗易懂
水平对齐 水平对齐——position position更多用法参考：CSS : position .horizontal-align-right { position: absolute;...水平对齐 水平对齐——float float更多用法参考：CSS : float .horizontal-align-right2 { float: right; } <div class="...水平垂直居中 flex更多用法参考：Flex 布局教程：语法篇 参考 http://www.runoob.com/<em>css</em>/<em>css</em>-align.html 有错误之处，感谢指出，接收批评
浮动（重点） image.png 浮动最早期做的是图文绕排 <style type="text/<em>css</em>"
三、css注释 语法：/*注释的内容*/ 四、css基本选择器 1.标签选择器 通过标签来选择元素，标签{css样式} 示意图 ?...2.id选择器 通过id属性来选择元素，#id名{css样式} 示意图 ?...注意：id选择要保证页面中的唯一性，这是语义 3.class类选择器 通过class属性选择元素，.类名{css样式} 示意图 ? Google小案例： 案例图示 ? 代码 span{...c) 给多个元素设置同一种样式，每个元素中间用 ， 隔开:元素1，元素2{css样式} 示意图 ?
CSS简介 CSS是Cascading Style Sheets（级联样式表）的缩写，也叫层叠样式表。定义如何显示HTML元素。 CSS是一种样式表语言，用于为HTML文档定义布局。...CSS语法 CSS实例 每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 ?...往上移动?...-100px（注意是负值）或者bottom：-100px（负值），往左移动：left:-100px（也是负值）或者right：-100px，往下移动:bottom：100px（正值）或者top：100px...（正值），往右移动：right:100px（正值）或者left：100px。
二、CSS语法 1、CSS实例 每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 ?...2、CSS注释 /*这是注释*/ 三、CSS的几种引入方式 1、行内样式 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。... 四、CSS选择器 1、基本选择器 1.1 元素选择器 p {color: "red...、伪类选择器 /* 未访问的链接 */ a:link { color: #FF0000 } /* 已访问的链接 */ a:visited { color: #00FF00 } /* 鼠标移动到链接上...关于浮动的两个特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止； 由于浮动框不在文档的普通流中，所以文档的普通流中的块级框表现得就像浮动框不存在一样。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
云直播
