CSS - 技术教程文章
CSS知识补足——图像标签img的知识补充
alt属性:当图像加载失败时起到提示的作用。title属性:当鼠标放到图片上时，会产生说明性的文字。原文：https://www.cnblogs.com/zhang188660586/p/12570424.html
WEB前端优化CSS,JS,图片【代码】
做网站优化的运维都知道，为了提高网站的访问速度，一般会开启Apache/Nginx gzip功能，将文件压缩，但是这个压缩与我要说的压缩不在一个层面。网上也提供一些在线css、js文件压缩功能。今天介绍一款linux工具来实现这个功能安装JAVAYUI Compressor由java开发，所有我们必须先有java环境。一般系统都会自带java，如果没带，那么yum安装一个openjava # yum install java 确认是否安装成功 [root@iZ288zwmtk4Z vhost]# java -version ...
Css【图】
Cssdiv1{}div2{}元素选择器通配符选择器*类型选择器EID选择器类选择器关系选择符父子选择器 eg：E e子选择器 eg：E>F相邻选择符 E+F兄弟选择器 E~F属性选择器E[att]{ sRules } 标签【属性】选择状态：link：正常hover：炫富active：被激活，能够和用户交互的元素才能有visitfocus outline:none//去掉文本框默认样式我的世界因为你的出现我的心情好多了来自为知笔记(Wiz)原文：https://www.cnblogs.com/Blue-air/p/9577738.htm...
css 让文字不被选中之-moz-user-select 属性介绍【代码】
他在ie下也能选中文字，但是选中其他列表，不会选中文字，原来它是在不同div中，属于不同的范围，而同事是放在同一个table中，当然会选中。 而在firefox下，文字不会被选中，查看google calender的css，原来还有-moz-user-select这个属性，很好玩！ 最后采用一个了js方法，即onselectstart=function{return false;}，不让页面进行选择，呵呵，这是很多网站不让复制采用的方法。 Summary -moz-user-select is a Mozilla property ex...
编写CSS代码时样式的命名规则
具体如下： 要注意的内容： 一，命名所选用的单词应选择不过于具体表示某一状态（如颜色、字号大小等）的单词，以避免当状态改变时名称失去意义。 二，样式类名由以字母开头的小写字母（a-z）、数字（0-9）、下划线（_）、减号（-）组成。 ID名称由不以数字开头的小写字母（a-z）、数字（0-9）、下划线（_）组成。 可使用类似下面的规则: [模块前缀|类型|作用]_[名称]_[状态|位置] 约定模块、类型、状态、位置等的所使用的单词或其...
CSS3自定义滚动条样式 -webkit-scrollbar【代码】
前言webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。演示来看看这2个滚动条demo： demo1（图片版）、demo2（纯CSS3版）滚动条组成::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）::-webkit-scrollbar-track 滚...
css基础知识
1、CSS （Cascding Style Sheet）层叠样式表 级联样式表 样式表2、CSS作用： 修改页面中元素的显示样式 能够实现内容与表现的分离 提高代码的可重用性和可维护性3、导入CSS的方式 在HTML里直接写<h1 style="属性：值;属性:值"> 在<style>里面写法 选择器{属性：值;} 在外部创建<link rel="stylesheet" type="text/css" href=""> 或 ...
CSS 从入门到忘记【代码】【图】
CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。一、 css的三种引入方式二、 css的选择器（Selector）三、 CSS的常用属性四、盒子模型五、 文档流与浮动1 文档流2 添加浮动(float)3 清除浮动(clear)4 定位（position）一、 css的三种引入方式1.行内式 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。2.嵌入式 嵌入式是将C...
CSS教程：div设置float后高度不自动增加
相关文章：http://www.jb51.net/css/divcss-4952.html http://www.jb51.net/css/divcss-5991.html本来想把这个题目修改为“闭合浮动元素”或“清除浮动元素”，但想了一下，还是不修改为好。因为从这个题目我们可以更加容易的看出，如果您没有闭合(清除)浮动元素，它将造成的后果是-----div的高度不能自动增加。言归正传目前用来清除“闭合(清除)浮动”的方法，主要是一下四种：1.额外标签法这种方法就是向父容器的末尾再插...
css 10 款非常棒的CSS代码格式化工具推荐【图】
http://www.iteye.com/news/23692/ 10 款非常棒的CSS代码格式化工具推荐2011-12-14 09:31 by 副主编 wangguo 评论(0) 有9111人浏览CSS 代码格式化相关知识库： PHP知识库 信息无障碍知识库 计算机网络知识库 C#知识库如果你刚开始学习CSS，这意味着你的很多代码或结构可能需要优化，比如你可能过多使用了类、添加了多余的间隔或空行等等，这将导致代码臃肿、混乱，可读性和执行效率将大大降低。 本文为你整理了几款CSS工具，借...
python前端CSS【代码】【图】
CSS基础CSS语法CSS的四种引入方式css选择器CSS属性操作Caution!后台管理布局CSS响应式布局CSS 语法CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。‘‘‘selector {property: value;property: value;... property: value}‘‘‘例如：1h1 {color:red; font-size:14px;} css的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。<p style="backgroun...
CSS样式中ClearBoth的理解【图】
在CSS中我们会经常要用到“清除浮动”Clear，比较典型的就是clear:both;CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。比如： 这个是第1列...
CSS响应式：根据分辨路加载不同CSS的几个方法，亲测可用【代码】
有时候你需要把同一个页面在手机和pc同时打开，其中有一个办法就是判断不同分辨路加载不同的css小编总结了几种分别加载css的方法： 1.比较复杂的使用js判断加载不同css （亲测可用）但是这种方法只有最开始的时候会判断，如果你拖动浏览器大小是不会发生改变的（当然如果喜欢拖着玩的话） 1 <link rel="stylesheet" type="text/css" id="links" href="../css/m_wuqinglan.css"/>2 <script type="text/javascript">3 ...
CSS3概述
首先我们了解下什么是css3，css3是css技术的一个升级。css3中并没有采用总体结构，而是采用分工协作的模块化结构。css3中的模块模块名称功能描述basic box model定义各种与盒相关的样式line定义与各种直线相关的样式speech定义各种与声音有关的样式，譬如音量、音速、说话间歇时间等属性background and border定义各种与背景和边框相关的样式 text定义各种与文字相关的样式color定义各种与颜色相关的样式font定义各种与字体相关...
CSS3圆角【代码】
#rcorners1 {border-radius: 25px;background: #8AC007;padding: 20px;width: 200px;height: 150px; }#rcorners2 {border-radius: 25px;border: 2px solid #8AC007;padding: 20px;width: 200px;height: 150px; }#rcorners3 {border-radius: 25px;background: url(/images/paper.gif);background-position: left top;background-repeat: repeat;padding: 20px;width: 200px;height: 150px; }#rcorners4 {border-radius:...
CSS3 Media Queries详细介绍和使用实例
Media Queries直译过来就是“媒体查询”，在我们平时的Web页面中head部分常看到这样的一段代码： 复制代码代码如下:<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />或者这样的形式： 复制代码代码如下: <style type="text/css" med...
CSS引入方式【代码】
CSS引入方式按照CSS样式书写的位置（或引入方式），CSS样式表可分为三大类行内样式表行内样式是在元素标签内部的style属性设定CSS样式，适合修改简单样式<div style="color:red; "></div>【注意】style其实就是标签的属性在双引号中间，写法要符合CSS规范可以控制当前的标签设置样式书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用内部样式表内部样式表是写到html页面内部，是将所有的CSS代码抽取出来，单独放...
CSS ul（列表样式）【代码】【图】
CSS Ul（列表样式）CSS列表属性作用如下：设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像一、列表在HTML中，有两种类型的列表：无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）有序列表 - 列表项的标记有数字或字母使用CSS，可以列出进一步的样式，并可用图像作列表项标记。二、不同的列表项标记list-style-type属性指定列表项标记的类型是：ul.a {list-style-type: circle;} /*无序，...
css基础【代码】【图】
一：盒模型盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。CSS盒子模型：W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在）w3schools上对于盒子模型的图示如下CSS盒子模型的属性：内容属性：宽=width 高=height内填充属性（内容与边框之间的距离）：padding外边距属性：margin（使用该属性的时候注意浏览器的兼容性）内填充与边界的规则：如果有四个参数...
css的一些细节【代码】
1、id选择器拥有最高的权重，可以覆盖之前的一些定义，比如 1<html> 2<head> 3<style type="text/css"> 4#color { 5 color: red; 6} 7p { 8 color: blue; 9}10</style>11</head>12<body>13<p id="color">test</p>14</body>15</html>“test”的字体颜色是红色。2、默认情况下，父元素的高度会根据子元素的内容自动调整，但是如果子元素设置为浮动，父元素的高度就会变为0，这就是为什么有时候明明设置了父元素的背景色却发现父...
css3 box-sizing属性【代码】
css3 box-sizing属性box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。content-box，border和padding不计算入width和height之内，浏览器默认也是这样padding-box，padding计算入width内border-box，border和padding计算入width之内，其实就是怪异模式了~ ie8+浏览器支持content-box和border-box；ff则支持全部三个值。 案例 #a1{width:500px;padding: 10px;border:1px solid #ee240f;}问...
px和em区别-在font-size的 css 的使用【代码】
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字体尺寸,多理解父级设定font-size的尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=6...
CSS布局基础--BFC【代码】【图】
1，什么是BFC BFC（Block Formatting Context）块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其他环境中的布局。它是W3C CSS2.1规范中的一个概念，是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且这个区域与外部毫不想干，2，生成BFC 下面的方法可以创建一个新的BFC （1）浮动元素，float: left | right （...
base.css【代码】
CSS文件结构CSS文件的书写可以用一定的结构来组织，来达到复用代码的目的。一般编写CSS样式规则，需要一些基础的模块，比如reset.css，它主要负责去减小浏览器的初始差异化规则。这个模块开源的比较广泛应用的有Yahoo的reset.css,还有normalize.css。这些现有资源拿来使用即可，但是使用之前应该认真地阅读一遍源码，看他们都做了哪些事情，还有一个比较基础的模块便是base.css,可以认为它负责一些高频次需要公共使用的样式规则，并...
CSS列表属性
CSS列表：属性描述list-style简写属性。用于把所有用于列表的属性设置于一个声明中。list-style-image将图象设置为列表项标志。list-style-position设置列表中列表项标志的位置。list-style-type设置列表项标志的类型。marker-offset 1. 列表类型：list-style-type属性（1）作用：修改用于列表项的标志类型；（2）可能的值：值描述none无标记。disc默认。标记是实心圆。circle标记是空心圆。square标记是实心方块。decimal标记是数...
CSS3 多列【代码】
nternet Explorer 10 和 Opera 支持多列属性。Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9 以及更早的版本不支持多列属性。column-count 属性规定元素应该被分隔的列数：column-gap 属性规定列之间的间隔：div { -moz-column-rule:3px outset #ff0000; /* Firefox */ -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */ column-rule:3px outset #ff0000; }column-coun...
分享一个纯css制作的动画化，在网页（手机）加载等的时候可以引用！【图】
CSS代码如下：/* Custom Stylesheet */ body, html {margin: 0;-webkit-font-smoothing: antialiased;background: #68ABAD;text-align: center;}/* DEMO 1 */.loader1 {margin: 0 auto;height: 20px;width: 20px;position:relative;-webkit-animation:spin 1.5s linear infinite;-moz-animation:spin 1.5s linear infinite;}.loader1 i{height: 20px;width: 20px;border-radius: 25px;display: block;position:absolute;}.loader1 ...
css 样式中使用表达式【代码】
在没遇到calc之前我一直在想如果width/height能过写表达式得多好 例如100%-30px然后写上width:100%-30px;～ 无效、郁闷啊！有时我们可以用box-sizing: border-box;来解决一些问题，但还是有些情况无效今天在看css手册的时候发现了一段demo令我眼前一亮 copy下来测试一把，其中就是width:calc(100% - 30px);注意运算符左右空格哦 demo就不上了 在公司机器上有 有空补上原文：http://tianxing.blog.51cto.com/1515290/1579339
常用Flex 布局归置 》仅做笔记 （scss）【代码】
@mixin df {display: -webkit-flex;display: -moz-flex;display: flex; }@mixin df-ai {-webkit-align-items: center;-moz-align-items: center;align-items: center; }@mixin df-ai-fs {-webkit-align-items: flex-start;-moz-align-items: flex-start;align-items: flex-start; }@mixin df-ai-fe {-webkit-align-items: flex-end;-moz-align-items: flex-end;align-items: flex-end; }@mixin df-jc {-webkit-justify-content: ce...
CSS3之Media Queries媒体查询
在CSS中，与媒体相关的样式定义是从CSS2.1开始的。CSS2.1中定义了各种媒体类型，包括显示器、便携设备、电视机，等等。 CSS3中加入了Media Queries模块，该模块中允许添加媒体查询表达式，用以指定媒体类型，然后根据媒体类型来选择应该使用的样式。换句话说，允许我们在不改变内容的情况下在样式中选择一种页面的布局以精确地适应不同的设备，从而改善用户体验。 我们知道，在不同的设备中，浏览器的窗口尺寸可能是不...