css样式 | 易学教程

前端入门笔记之CSS篇

阅读更多关于前端入门笔记之CSS篇

OXO1 写在前面一.html和css 1.HTML和CSS的对比（1）HTML只关注语义和结构，主要是对网页元素的整理和分类。（2）CSS的主要使用场景就是美化页面，布局页面。（3) CSS和HTML搭配使用，实现网页结构，表现分离。 2.CSS概述（1）概念 CSS是叠层样式表（Cascading Style Sheets），也称为CSS样式表或级联样式表。也是一种标记语言。（2)作用 CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)，图片的外形（宽高，边框样式，边距等）以及版面布局和外观显示样式。 (3)CSS语法 CSS主要是由选择器以及一条或者多条申明组成。选择器 { 属性1: 值1；属性2: 值2； } demo : p { color: red; font-size: 12px; } 注：选择器：指定修改样式的目标声明：要改成的样式（4）CSS注释： /* 我是被注释掉的内容 */ OXO2 CSS上选择器分为：基础选择器和复合选择器两大类。一. 基础选择器基础选择器分为：标签选择器，类选择器，id选择器和通配符选择器。 1.标签选择器 (1) 标签选择器(元素选择器)是指用HTML标签名称作为选择器，按照标签分类，为页面中某一类型的标签，指定统一的CSS样式。 (2)语法标签名 { 属性1：值1；属性2：

有关css中能够改变字体间间距的问题及改变input中placeholder样式的写法

阅读更多关于有关css中能够改变字体间间距的问题及改变input中placeholder样式的写法

1.改变字体间间距使用letter-spacing:5px;可以改变字体间间距 2.修改placeholder样式 input::-webkit-input-placeholder{ font-family: '\5FAE\8F6F\96C5\9ED1'; font-weight: 400; font-style: normal; font-size: 12px; color: #000000; text-align: left; margin-left: 20px; letter-spacing:5px;}input::-moz-placeholder{ /* Mozilla Firefox 19+ */ font-family: '\5FAE\8F6F\96C5\9ED1'; font-weight: 400; font-style: normal; font-size: 12px; color: #000000; text-align: left; margin-left: 20px; letter-spacing:5px;}input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ font-family: '\5FAE\8F6F\96C5\9ED1'; font-weight: 400; font-style:

css控制字数

阅读更多关于 css控制字数

控制文章标题字数，不是动态网页的专利，如果静态页面使用CSS样式，也可以实现相同的效果！看这个例子，你们可以复制到记事本保存为HTML文件看效果！ <html> <title>css控制字数</title> <head> <style type="text/css"> .dd { border: solid 1px gray; width:180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; course:hand; } </style> </head> <body> <span class="dd"> 信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数 </span> <br> <div class="dd"> 信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数信心网使用CSS控制文章标题字数 </div> </body> </html> 看到效果后，您应该相信这不是虚言了吧，o(∩_∩)o...！其中white-space 属性设置如何处理元素内的空白。这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。继承性：Yes JavaScript 语法

CSS

阅读更多关于 CSS

1.概念 1.概念：Cascading Style Sheets层叠样式表　　层叠：多个样式可以作用在同一个html元素上，同时生效 2.好处：功能强大，将内容展示和样式控制分离。　　1.降低耦合度。　　2.让分工协作更容易。　　3.提高开发效率。 2.html与css的结合方式 1.内联样式：在标签内使用style属性指定CSS代码。 2.内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码 3.外部样式　　1.定义css资源文件　　2.在head标签内，定义 link标签，引入外部的资源文件。注：1，2，3种方式作用范围越来越大。常用2,3方式 3.css基本语法 1.格式：　　选择器 { 　　　　属性名1：属性值1；　　　　属性名2：属性值2；　　　　。。。　　} 2.选择器：筛选具有相似性质的元素注意：每一对属性需要使用；隔开，最后一对属性可以不加分号 4.选择器 1.基础选择器　　1.id选择器：选择具体的id属性值的元素。　　　　语法：#id值{} 　　2.元素选择器：选择具有相同标签名称的元素（id选择器优先级要高于元素选择器）　　　　语法：标签名称{} 　　3.类选择器：选择具有相同的class属性值的元素　　　　语法：.class属性值{} 优先级：1>3>2 2.扩展选择器　　1

记一次小程序样式优化重构

阅读更多关于记一次小程序样式优化重构

3 月，跳不动了？>>> 上周花了 3 天的时间和老大一起重构了一下小程序的样式开发，虽然说在开发的过程中遇到了一些问题，但是最终减少了不少样式代码，同时功能上也更加强大。进一步来说，如果在后面我们的小程序用户想要自己定制化主题，也可以很快的实现。全局样式开发之前的小程序开发中，我们全方面使用了 Component 构造小程序组件以及页面(页面也可以使用 Component 构造器来编写)。当然一方面是因为小程序 Component 的开发体验非常好，拥有类似于 Vue mixin, watch 的 behaviors 和 observers ，比 Page 构造器强大了很多。另一方面，对于业务较重的小程序来说, Component 也有性能优势。可以参照滴滴开源小程序框架Mpx 中的 Page与Component setData性能对照。在开发过程中，有很多样式是可以复用的。如果在之前开发中经常使用 Bootstrap 之类的 ui 库，那么你就会习惯使用这种库的 utilities 类。但是默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。不会受到全局样式 app.wxss 的影响。所以我们只能通过增加 @import 语法来辅助各个组件进行开发。 @import "xxx.css"; 如果你使用 CSS 预处理器来辅助小程序开发的话，可能就需要通过

纯css写单选框和复选框的样式和功能

阅读更多关于纯css写单选框和复选框的样式和功能

只用纯css写的单选框和复选框的样式和功能该怎么写？看这里，复制下面的代码运行一遍就知道了，快试试吧！效果截图： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <title>移动单选按钮</title> <link rel="stylesheet" type="text/css" href="http://dn.yun******.com/css/reset-min.css"> <style> /*纯CSS写法*/ .checkbox-group input{display:none;opacity:0;} .checkbox-group input[type=checkbox]+label, .checkbox-group input[type=radio]+label { line-height: 1; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox;

CSS 基本测试题

阅读更多关于 CSS 基本测试题

下面提供了18道有关css的测试题，大家可以尝试做一下，一些题可以延伸深挖出很多知识点。测试题的答案在尾部。大家可以在评论区进行讨论。 1.css区分大小写吗？ ul { MaRgIn: 10px; } 这种写法是否正确？ 2.为行内元素设置 margin-top 和 margin-bottom是否会产生影响？ 3.为行内元素设置 padding-top 和 padding-bottom是否会改变它的位置？ 4.如果你有一个<p>元素，它的font-size为10rem, 当用户改变浏览器窗口大小时，该元素的字体是否会响应式改变？ 5.伪类:checked作用于radio 或者 checkbox，但是不作用于<option>？ 6.在HTML中，伪类:root总是匹配 <html> 元素？ 7.translate()函数实现了沿着 z 轴移动元素？ 8-14题是针对同一个html,循序渐进。 8. html: <ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> </ul> css: ul { color: red; } li { color:

css知多少（8）——float上篇

阅读更多关于 css知多少（8）——float上篇

原文: css知多少（8）——float上篇 1. 引言　　对于我们所有的web前端开发人员，float是或者曾经一度是你最熟悉的陌生人——你离不开它，却整天承受着它所带给你的各种痛苦，你以为它很简单就那么一点知识，但却驾驭不了它各种奇怪的现象。　　这就是我们又爱又恨的——float。所以，系统的学一学float是非常非常重要的。除了看书和看博客文章之外，我推荐大家去看一个奇葩（声音很有磁性，你懂得）录制的教程《CSS深入理解之float浮动》，讲的很好很透彻。 2. 重新认识float 2.1. 误解和“误用” 　　既然提到“误用”，各位看官就此想想，自己平日是怎么使用float的？另外，既然“误用”加了引号，就说明这样的使用并不是真正的误用，而是误打误撞使用之后，带来了真正的效果。　　这样一问大家，我想绝大多数用float都是为了——横向排版、或者多列布局。这样的使用是正确的，大部分人都这样使用，bootstrap的栅格系统也是使用了float来实现的，并且在css3被普及之前，多列布局的最佳解决方案也是使用float——要不然你就用table。　　但是，这样使用确实是对float的一种误解和“误用”，因为float被设计出来的初衷是用于—— 文字环绕效果。即，一个图片一段文字，图片float:left之后，文字会环绕图片。　　　　但是

css整理

阅读更多关于 css整理

1.介绍一下标准的css的盒子模型？与ie盒子有什么区别？（1）有两种盒子，一个是W3C盒子模型，另一个是IE盒子模型（2）盒模型：内容（content），内边界（padding），边框（border），外边界（margin）（3）区别：ie的content部分把padding和border算进去了 2.css选择符有哪些，哪些属性可以继承？ ①id选择器（ # myid） ②类选择器（.myclassname） ③标签选择器（div, h1, p） ④伪类选择器（a:hover, li:nth-child） ⑤子选择器（ul > li） ⑥后代选择器（li a） ⑦相邻选择器（h1 + p） ⑧通配符选择器（ * ）可继承的样式： font-size font-family color, UL LI DL DD DT; 不可继承的样式：border padding margin width height ; 3.css优先级优先级就近原则，同权重情况下样式定义最近者为准; 载入样式以最后载入的定位为准; 优先级为: !important > id > class > tag important 比内联优先级高 4.CSS3新增伪类有哪些？ :after 在元素之前添加内容,也可以用来做清除浮动。 :before 在元素之后添加内容 :disabled

Twitter Bootstrap 框架

阅读更多关于 Twitter Bootstrap 框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成，与CSS框架 Blueprint 存在很多相似之处。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的 code.nasa.gov 和MSNBC（微软全国广播公司）的 Breaking News 都使用了该项目。 Bootstrap 2.0 的一个重大改进是添加了响应设计特性，在1.0中它并不支持，这让很多开发人员抱怨。而且为了提供更好地针对移动设备的响应式设计方案，Bootstrap 2.0采用了更为灵活的12栏网格布局。此外，它还更新了一些进度栏以及可定制的图片缩略图，并增加了一些新样式。值得关注的是，Bootstrap是一个非常轻量级的框架，2.0在压缩后也只有10KB。更多详细信息请参考Twitter的官方指南和演示示例。来源： https://www.cnblogs.com/eastson/archive/2012/09/20/2695401.html

订阅 css样式