css样式

CSS浮动(二)---Float

由 假如想象 提交于 2020-03-17 01:05:23
重新认识float 2.1. 误解和“误用” 　　既然提到“误用”，各位看官就此想想，自己平日是怎么使用float的？另外，既然“误用”加了引号，就说明这样的使用并不是真正的误用，而是误打误撞使用之后，带来了真正的效果。 　　这样一问大家，我想绝大多数用float都是为了——横向排版、或者多列布局。这样的使用是正确的，大部分人都这样使用，bootstrap的栅格系统也是使用了float来实现的，并且在css3被普及之前，多列布局的最佳解决方案也是使用float——要不然你就用table。 　　但是，这样使用确实是对float的一种误解和“误用”，因为float被设计出来的初衷是用于——文字环绕效果。即，一个图片一段文字，图片float:left之后，文字会环绕图片。 　　 　　但是，当时的多列布局和横向排版主要是依靠table实现，后来人们见见的发现，使用table将导致代码量大、混乱、不利于SEO，然后发现float+div是一个很不错的排版解决方案，于是乎——过去几年“css+div”页面排版一直是一个热门话题，也是各种高大上的面试题必考的一项。 　　初学float的同学，你如果没有从最基础的知识入手，而是从网络的零散之后或者同事同学的零散代码学起的话，你可能只知道float是用来排版的，但是你却不知道float的许多个特性，这就导致了你在使用float时的许多问题

css布局知识点汇总

由 若如初见. 提交于 2020-03-17 00:42:17
　　　　昨天早上看到了一篇很棒的文章，这篇文章将布局的一些知识点整理的很不错。我也想整理一下，这样在以后的项目中可以活学活用，避免只用一种方式。 参考文章：https://segmentfault.com/a/1190000013565024；https://segmentfault.com/a/1190000008789039#articleHeader4 　　　　前端布局是页面构建过程中很基础，很重要的一环。这里介绍一些我了解的，不足的地方大家可以补充。 　　　 一、常用的居中方法 　　　　　1、水平居中 　　　　　　　　　①如果子元素是行内元素，可以直接设置父元素使用:text-align:center的方式，使子元素水平居中； 　　　　　　　　　<div class="container"> 　　　　　　<span>css布局整理</span>　　　　　　　　　</div> 　　　　　　　　　　.container{ 　　　　　　 text-align: center; 　　　　　　　　　　} 　 ②将子元素变为行内块元素，然后设置　父元素text-align:center的方式; 　 　　　　　　　　　　优点：兼容性好，可兼容IE6/IE7 　　　　　　　　　　缺点：子元素的文字也是自动水平居中的，如果不需要文字水平居中，需要设置text-align:left/right

jquery css

由 寵の児 提交于 2020-03-17 00:28:03
jQuery提供 css() 的方法来实现嵌入式改变元素样式， css() 方法在使用上具有多样性。其中一种接受两个输入参数：样式属性和样式值，它们之间用逗号分开。比如我们要改变链接颜色，我们可以使用下面的代码： $("#61dh a").css('color','#123456'); //这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。 //.css(‘color’,'#123456');表示把颜色设为'#123456' 如果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给 css() 方法。示例如下： var divcss = { background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border: '1px solid #CCC' }; $("#result").css(divcss); //这里我们先定义了一个CSS样式属性变量‘divcss’，这类似于建立一个外部CSS文件。 //然后通过jQuery提供的css()方法，把属性赋给ID为'#result'的DIV。 另外jQuery提供的 css() 方法还可以用来查看某个元素的css属性值。例如，我们想查看链接的颜色，可以使用下面的代码： $("#61dh a").css

jQuery基础 - 改变CSS样式

由 耗尽温柔 提交于 2020-03-17 00:27:46
jQuery提供 css() 的方法来实现嵌入式改变元素样式， css() 方法在使用上具有多样性。其中一种接受两个输入参数：样式属性和样式值，它们之间用逗号分开。比如我们要改变链接颜色，我们可以使用下面的代码： $("#61dh a").css('color','#123456'); //这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。 //.css(‘color’,'#123456');表示把颜色设为'#123456' 如果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给 css() 方法。示例如下： var divcss = { background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border: '1px solid #CCC' }; $("#result").css(divcss); //这里我们先定义了一个CSS样式属性变量‘divcss’，这类似于建立一个外部CSS文件。 //然后通过jQuery提供的css()方法，把属性赋给ID为'#result'的DIV。 另外jQuery提供的 css() 方法还可以用来查看某个元素的css属性值。例如，我们想查看链接的颜色，可以使用下面的代码： $("#61dh a").css

jQuery基础 - 改变CSS样式

由 青春壹個敷衍的年華 提交于 2020-03-17 00:26:47
jQuery提供 css() 的方法来实现嵌入式改变元素样式， css() 方法在使用上具有多样性。其中一种接受两个输入参数：样式属性和样式值，它们之间用逗号分开。比如我们要改变链接颜色，我们可以使用下面的代码： $("#61dh a").css('color','#123456'); //这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。 //.css(‘color’,'#123456');表示把颜色设为'#123456' 如果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给 css() 方法。示例如下： var divcss = { background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border: '1px solid #CCC' }; $("#result").css(divcss); //这里我们先定义了一个CSS样式属性变量‘divcss’，这类似于建立一个外部CSS文件。 //然后通过jQuery提供的css()方法，把属性赋给ID为'#result'的DIV。 另外jQuery提供的 css() 方法还可以用来查看某个元素的css属性值。例如，我们想查看链接的颜色，可以使用下面的代码： $("#61dh a").css

css和div

由 你说的曾经没有我的故事 提交于 2020-03-16 19:44:23
1.css：（Cascading style sheet） 使用css的原因： css能够实现内容与样式的分离。但是不容易在界面中维护，调整高度 等难度系数比表格大。 css后期维护，改变背景颜色，字体颜色等比较方便。 css精确的控制，实现精美 ，复杂的页面。 主要功能：美化网页，实现网页的布局，图片等的定位。（排版与风格设计 简化的web开发） 2.使用css基本格式： <head> <style> 选择器 {对象的属性：属性值} </style> </head> 选择器：就是所要修饰的对象； 3.标签的类型： 标签选择器：就是容器的名字 如<p>（直接写p{；；；}）就可以了。 类选择器：需要有.在修饰对象的前面。 如<p class="text"> .text{;;;;} ID选择器：需要#在修饰对象的前面。 如<div id="text"> #text{;;;;} 4.三种选择器的区别： 标签选择器：如果在body出现标签，全都修饰。 类选择器：主要有class标示。有class的地方就会被修饰。 ID选择器：ID选择器是唯一的，只能用一次。 5.选择器的优先级：ID选择器>类选择器>标签选择器 6. 标签css示例 <html> <head> <style> p{font-size:12px; color:#FFF；} </style> </head> <body>

CSS_字体属性

由 让人想犯罪 __ 提交于 2020-03-16 18:26:42
1.字体 font-family:"字体1", "字体2"，……; /*从左到右依次选择用户电脑中的字体*/ 2.字体大小 font-size: 100px; /*设置字体大小为100像素*/ 3.字体颜色 /*rgb表示法：*/ color:rgb(125,45,199); /*rgba表示法：a表示透明度，取值范围0-1*/ color:rgba(255, 155, 55, 0.5); /*十六进制表示法*/ color:#400080; /*单词表示法*/ color:blue; 4.字体样式 font-style: italic; /*斜体，默认为normal正常 */ 5.字体粗细 font-weight: 900; /*设置字体粗细：数值（默认为400）*/ font-weight:bolder; /*设置字体粗细：单词（更粗的默认为normal正常）*/ 6.文本属性 /*默认的：没有效果*/ text-decoration: none; /*下划线*/ text-decoration:underline; /*上划线*/ text-decoration:overline; /*删除线*/ text-decoration:line-through; 来源： https://www.cnblogs.com/wangdianchao/p/12505365.html

css的权重

由 回眸只為那壹抹淺笑 提交于 2020-03-16 12:06:06
css2.0对权重描述的并不是很清楚，但是在 CSS2.1 里W3C已经对CSS的权重有了明确的规定。 Media type and element match Importance and origin in ascending order of importance (confusingly): user agent style sheets user normal style sheets author normal style sheets author important style sheets user important style sheets Specificity Source order 　　这里面最重要的就是3.Specificity特异性，我把他翻译为权重。 权重是样式表的精髓，它也是样式表时时刻刻在做的事情，是它决定元素该用那个规则而不用哪个规则。在它做决定一起，它要参考几样东西：规则的特殊性，规则的来源，规则出现的顺序。这几样东西的先后顺序，也就是左右它决定的先后顺序。也就是说，它们在帮助层叠做决定的过程中，扮演的优先级别是：特殊性》来源》顺序。只有在前一项一致的情况才去考虑后者。也就是说当几个规则的特殊性一致，才去考虑他们的来源是否一直，是否可以决定用哪条规则，如果来源也一样的话，就只剩下用出现的顺序，来决定最终的胜出者

CSS权重

由 我的未来我决定 提交于 2020-03-16 12:05:29
曾经在有一年工作经验的时候去面试，被考官问及CSS权重的问题，当时我的回答是： 1.内联样式>写在头部的样式>外部导入的样式表 2.写在后面的样式会覆盖前面的样式 3.好像样式名称层级越多，优先级越高。比如： li.classA .classB > .classA .classB虽然这个例子是正确的，但是那时候是存在一个误区的， .classA .class > #idA 今天看了一篇文章，受益匪浅，决定概括性地记录一下，加深印象。 权重有计算口诀的哟！ 来跟我一起背起来~~~ 一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1 然后再来一个栗子，只要小学数学毕业了，应该都会了。 如果想要阅读长篇文章的话，请移步： http://www.w3cplus.com/css/css-specificity-things-you-should-know.html 来源： https://www.cnblogs.com/susan-90/p/4977996.html

css权重

由 两盒软妹~` 提交于 2020-03-16 12:05:11
除了 浮动 之外，css权重问题是你要了解的，最复杂的一个概念之一。css每条规则权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主要原因。为了减少调试bug的时间，你需要了解浏览器是怎样解析你的代码的。为了完成这个目标，你需要对权重是如何工作的，有一个清楚的认识。很多Css出现问题的场景，都是某处定义了一个更高权重的规则，导致此处规则不生效。 Css权重问题并不简单，而且有很多或具体或抽象的理论来解释这个问题。本文也将探讨这个问题，我相信如果你喜欢星球大战的话你肯定会理解这些概念的~ 我们将会讨论关于css权重的主要问题，包括例子，规则，原理，通用解决方案以及一些资源。 CSS权重：概述 权重决定了哪一条规则会被浏览器应用在元素上。 权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主要原因。 权重的级别划分时包含了所有的css选择器 如果两个选择器作用在同一元素上，则权重高者生效。 权重的级别根据选择器被划分为四个分类：行内样式，id，类与属性，以及元素。 你可以通过 CSS权重之争 进一步了解CSS权重。 你也可以通过 CSS Specificity for Poker Players 进一步了解CSS权重。 如果两个选择器权重值相同，则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大，会取代前面的CSS规则) 如果两个选择器权重值不同
订阅 css样式