CSS（1） - 相关文章

前端学习第五弹： CSS （一）

前端学习第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="mystyle.css" /> 外联 <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40…

部分博客<CSS--(1)基础>中简介了CSS的概念和几种用法,如今主要是介绍其的核心内容. 盒子模型为了理解盒子模型,我们能够先从生活中的盒子入手.盒子是用来放置物品的,内部除了有物品外,还有填充部分的东西. 盒子与盒子之间还会有间隙.例如以下图所看到的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDA2NjkzNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70…

前端总结·基础篇·CSS（一）布局

目录这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) & 块元素(block) 1.3 行内块元素(inline-block IE8+ IE6-7/tools) 1.4 flex(IE11+ IE10/-ms-) 1.5 none 二.位置(position) 三.补充 3.1 浮动(float) 3.2 层叠(z-index) 3.3 溢出(overflow…

前端总结·基础篇·CSS（二）视觉

前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·CSS(四)兼容目录一.动画(animation)(IE10+)(CSS3) 1.1 定义动画 1.2 引用动画 1.3 多个动画 1.4 更多属性二.过渡(transition)(IE10+)(CSS3) 2.1 定义首尾 2.2 应用过渡 2.3 多个过渡 2.4 更多属性三.转换(transform)(IE10+,-ms-,-webkit-,-…

前端总结·基础篇·CSS（三）补充

前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充目录一.移动端 1.1 视口(viewport) 1.2 媒体查询(media query) 1.3 相对字体大小(rem/em) 二.选择器 2.1 常用 2.2 关系 2.3 伪元素 2.4 伪类 2.5 优先级三.样式重置(reset) 3.1 常用重置 3.2 重置插件(Normalize.css) 四.浏览器前缀 4.1 前缀由来 4.2 解决方案五.兼容性…

CSS（一）引入方式选择器权重

Css(一) Cascading Style Sheet 层叠样式表 css注释方式/* */ 一.Css引入方式 1. 行间样式 style=" key:value; " <div style="width:100px;height:100px; background:yellow;"></div> 2.页面级css 即在 head 标签里写 style 标签里面写行间样式 (不推荐) <style> body{ b…

CSS（选择器）

CSS(选择器) 作用:用于匹配 HTML 元素选择器分类: 1.元素选择器 a{} 2.伪元素选择器 ::before{} (真实存在的元素) 3.类选择器 .link{} 4.属性选择器[type=radio]{} 5.伪类选择器 :hover (一种状态,不是真实存在的) 6.ID选择器 #id (唯一存在) 7.组合选择器[type=checkbox]+label{} 8.否定选择器 :not(.link){} 9.通用选择器 *{} 选择器权…

CSS——（2）盒子模型与标准流

上篇博客<CSS--(1)基础>中简单介绍了CSS的概念和几种使用方法,现在主要是介绍其的核心内容. 盒子模型为了理解盒子模型,我们可以先从生活中的盒子入手.盒子是用来放置物品的,内部除了有物品外,还有填充部分的东西.盒子与盒子之间还会有间隙.如下图所示: 对于网页中的大部分对象,实际呈现形式都是一个盒子形状对象,理解了盒子模型才能更好的排版. CSS盒子模式具备的属性: 内容(content).填充(padding).边框(border).边界(margin).从上面的例子来看:内容即对应…

ASP.NET动态网站制作（3）--css（2）

前言:css分为四次课讲完,第一节课内容见ASP.NET动态网站制作(2)--css(1),接下来的内容会涉及到定位.浮动.盒子模型(第二次课).css的具体应用(第三次课).css3(第四次课).今天的内容是关于css中定位.浮动以及盒子模型. 内容:CSS最核心的内容,围绕div标签展开. 1.做静态网页首先要考虑页面的布局,可用<div></div>来将网页分为不同的模块,就相当于盖房子一样. 2.<div></div>是一个块元素,与之相对应的还有行…

css（一）

CSS CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一 css的四种引入方式 1.行内式行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.嵌入式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: <head…

css（二）

本文是一些作者在长期写代码中总结的常用css查询,写在本博客中,方便以后查询. 1. 颜色属性: color HEX(十六进制色:color: #FFFF00 --> 缩写:#FF0) RGB(红绿蓝,使用方式:color:rgb(255,255,0)或者color:rgb(100%,100%,0%)) RGBA(红绿蓝透明度,A是透明度在0~1之间取值.使用方式:color:rgba(255,255,0,0.5)) HSL(CSS3有效,H表示色调,S表示饱和度,L表示亮度,使用方式:co…

前端之CSS（二）

一.盒子模型说到盒子模型,我们不得不提一下,W3C标准和IE浏览器是有区别的,我昨天就在写抽屉作业的时候踩过坑,建议用谷歌浏览器,并推荐一篇博文:http://www.osmn00.com/translation/213.html 在W3C盒模型中,一个块级元素的总宽度(总高度同理)按照如下的方程式计算: 总宽度 = margin_left + border_left + padding_left + width + padding_right + border_right + margin_…

前端之CSS（一）

一.什么是CSS CSS是Cascading Style Sheets,层叠样式表,高大上的说法是用来控制网页数据的表现,可以使网页的表现与数据内容分离.通俗来讲,就是用各种盒子的堆叠实现我们想要的HTML页面,武sir说招聘的时候都不说招前端,而是招div+css,我觉得很贴切. 二.CSS的引入 1.行内式  <p style="background-color: chartreuse">yinrufangshi1</p&g…

【转】CSS（10）盒子模型

CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和外边距(margin) 的方式.在HTML文档中,每个元素(element)都有盒子模型,所以说在Web世界里(特别是页面布局),Box Model无处不在.下面是Box Model的图示: Box-Model 1 说明:上图中,由内而外依次是元素内容(content).内边矩(padding-top.paddin…

PHP.9-HTML+CSS（三）-CSS样式

CSS样式 CSS是Cascading Style Sheets的简写,它除了可以轻松设置网页元素的显示位置和格式处,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果.CSS就是要对网页的显示效果实现与Word一样的排版控制一个段落.字体.颜色.背景.边框等. 注:注释/* */里面不能再包含注释 1.CSS的四种设置方式内联样式表:在HTML元素标签中使用style属性内联,在需要相同样式情况下,不适用每个HTML标签都可以加样式,如下: <span style="fon…

PHP.8-HTML+CSS（二）-HTML详解

HTML+CSS HTML参考手册[http://www.w3school.com.cn/tags/index.asp] 0.HTML主体标记代码分为三部分编写 <html> 是网页文件的最外层标记 <head> 之间的文本是头信息不会显示在浏览器中,包括基本的描述,整个网页的公共属性 </head> <body> 是网页文件的主体部分正文 :文字.图片.链接.表单等 </body> </html> 1.HTML文档头部标记 &…

PHP.7-HTML+CSS（一）-HTML语法、常用字符实体、颜色代码

HTML+CSS HTML是WEB页面的描述性语言,浏览器解释的语言 CSS则是为HTML制定样式的机制,为浏览器解释的语言.它不能独立使用,没有HTML就没有CSS,定义网页的外观和布局(字体.背景.文本.位置.边缘.列表及其它) JavaScript是具有交互性Web设计最佳选择都可以独立编写 CSS和JavaScript还有PHP都可以嵌入在HTML中应用 HTML语法 <标记名> </标记名> 成对的标记,也称为容器.标记中可以嵌套其它的标记 0.HTML标签属性属性…

CSS——（1）基础

CSS(Cascading Style Sheets)层叠样式表含义一种计算机语言: 能够实现网页与内容分离: 用来表现文件样式,如HTML或XML: 比較 div与css 假设说div是容器的话,那么css就是装饰或是表现容器样式的事物.比方div是盒子,那么css的作用就是表示盒子的颜色,大小,体积等. html与css html是负责网页内容的:css是负责网页样式的,并且css非常好的解耦网页的内容和样式. 选择器设置选择器之后,我们就能够设置CSS样式了. 那不设选择器行不行呢?…

jQuery慢慢啃之CSS（六）

1.css(name|pro|[,val|fn])//访问匹配元素的样式属性 $("p").css("color");//获取 $("p").css({ "color": "#ff0011", "background": "blue" });//属性组设置 $("p").css("color","red");…

html进阶css（４）

盒子模型-边框首先请看下图 <!doctype html> <html> <head> <meta charset="utf-8"> <title>盒子模型边框</title> <style type="text/css"> p{border:2px solid red;}/*border的缩写格式*/ p{ border-width:2px; borerstyle:solid;…

html进阶css（2）

选择器的类型 <!doctype html> <html> <head> <meta charset="utf-8"> <title>css的选择器</title> <style type="text/css"> .stress{color:red;}/*类前面要加入一个英文圆点*/ #setgreen{color:green} </style> </head>…

Div+Css（一）必备知识

我只积累我不知道的参考链接 http://www.kwstu.com/ArticleView/divcss_201442291125960 http://www.kwstu.com/ArticleView/divcss_2013929173533658 Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直接解释方法就是能实现表格布局的多列功能. Flo…

selenium css（转）

如果button上有class属性的,如: <button id="ext-eng=1026" class="x-right-button"...> 可以这样写: css=button.x-right-button .代表class 如果class里带的空格,用.来代替空格如: <button class="x-btn-text module_picker_icon">... 可以这样写: css=button.x…

css（四）-- 盒子模型和定位

盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框,盒子模型要做用于操作数据与边框之间的距离或者是边框与边框之间的距离. 盒子模型主要是用于操作内边距(padding)与外边距(margin) 盒子模型的示意图如下: css的定位:使用方式: 相对定位: 相对定位是相对于元素原本的位置进行移动的. position:relative; 绝对定位: 绝对定位是相对于整个页面而言. position:absolute; t…

一天搞定CSS（扩展）：CSS Hack

做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验.可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况.今天,结合自己的经验和理解,做了几个demo把IE6~IE10和其他标准浏览器的CSS hack做一个总结,也许本文应…

【CSS（1）】的更多相关文章