css样式表

css规范

生来就可爱ヽ(ⅴ<●) 提交于 2020-03-23 06:06:04
http://www.qingdou.me/2142.html CSS书写 顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text-align等) 4.背景(background, border等) 5.其他(animation, transition等) CSS书写 规范 使用CSS缩写属性 CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。 去掉小数点前的”0″ 简写命名 很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦! 16进制颜色代码缩写 有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。 连字符CSS选择器命名规范 1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用”_”下划线来命名CSS选择器,为什么呢? 输入的时候少按一个shift键; 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的) 能良好区分JavaScript变量命名(JS变量命名是用”_”) 这里有一篇破折号与下划线的详细讨论,英文: 点击查看

CSS禁止滚动条

淺唱寂寞╮ 提交于 2020-03-17 05:53:59
CSS禁止滚动条的方法: 1、完全隐藏 在<boby>里加入scroll="no",可隐藏滚动条; <boby scroll="no"> 2、在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条; 反之,则显示; <boby scroll="auto"> 3、样式表方法 在<boby>里加入style="overflow-x:hidden",可隐藏水平滚动条; 加入style="overflow-y:hidden",可隐藏垂直滚动条。 被包含页面里加入 <style> html { overflow-x:hidden; } </style> 4、另一种方法 <style type="text/css"> body { overflow-x:hidden; overflow-y:hidden; } </style> <style type="text/css"> html { overflow-x:auto; overflow-y:auto; } </style> 来源: https://www.cnblogs.com/jepson6669/p/9062336.html

HTML & CSS

走远了吗. 提交于 2020-03-14 20:07:09
1 请遵循html元素必须有开始和结束的标准规范 <html></html> <p></p> 2 空元素,空元素没有结束标签,形式如下 <br /> //换行 <hr /> //水平线 3 html注释 <!-- 注释内容 --> 4 上标下标 <sub>下标</sub> //下标 <sup>上标</sup> //上标 5 预格式文本 <pre></pre> //保留了里面的空格,适合放代码,html元素默认会除去行首行尾段首段为空格 6 删除线下划线 <del></del> <ins></ins> 7 链接 没有下划线的链接 <a href="/example/html/lastpage.html" style="text-decoration:none"> 使用 Target 属性,你可以定义被链接的文档在何处显示 <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a> 链接到同一个页面的不同位置 name 属性规定锚(anchor)的名称。您可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示,它对读者是不可见的 <a name="tips">基本的注意事项 - 有用的提示</a> <a href="#tips">有用的提示</a> 8 样式表 内部定义的

面试题目整理

安稳与你 提交于 2020-03-13 18:45:43
HTML&CSS 1、常用哪几种浏览器测试?有哪些内核(Layout Engine)? (Q1)浏览器:IE,Chrome,Firefox,Safari,Opera (Q2)内核:Trident,Gecko,Presto,Webkit 2、说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8以下) (Q1)行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效 padding上下无效。块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行 (Q2)兼容性:display:inline-block;*display:inline;*zoom:1; 3、清除浮动有哪些方式?比较好的方式是哪一种 (Q1)(1)父级div定义height (2)结尾处加空div标签clear:both (3)父级div定义伪类:after和zoom (4)父级div定义overflow:hidden (5)父级div定义overflow:auto (6)父级div也浮动,需要定义宽度 (7)父级div定义display:table (8)结尾处加br标签clear:both (Q2)比较好的是第3种方式,好多网站都这么用 1、box-sizing 常用的属性有哪些?分别有什么作用? (Q1)box

JQuery日期插件datepicker的使用

丶灬走出姿态 提交于 2020-03-12 07:34:30
1. jQuery 是一款非常优秀的脚本框架,其丰富的控件使用起来也非常简单,配置非常灵活。下面做一个使用日期插件datapicker的例子。 1、下载jQuery核心文件就不用说了吧,datepicker是轻量级插件,只需jQuery的min版本就行了,然后到官网 http://jqueryui.com/download 下载jquery-ui压缩包(可以选择喜欢的theme),里面就包含对datepicker的支持,当然您也可以网站 http://marcgrabanski.com/pages/code/jquery-ui-datepicker 下载datepicker,包括ui.core.js和ui.datepicker.js。 2、在HTML中引用下载下来的js文件: [xhtml] view plain copy <!-- 引入 jQuery --> < mce:script src= "js/jquery.1.4.2.js" mce_src= "js/jquery-1.5.1.min.js" type= "text/ JavaScript " > </ mce:script > <!--添加datepicker支持--> < mce:script src= "js/jquery.ui.core.js" mce_src= "js/jquery.ui.core.js"

注册页面编写(html/css)

南笙酒味 提交于 2020-03-06 20:53:56
图样展示 照片在WEB-INF下方的image中 照片链接: https://pan.baidu.com/s/1BhbA1J-19Y0FMokMsMtK0g 提取码:coru 特别适用于初学者 regist.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XINGGou</title> <!-- 引入regist.css样式表文件 --> <link rel="stylesheet" href="regist.css"> </head> <body> <!-- 头部分 --> <div id="header"> <!-- 第一行 --> <div id="line1"> <img alt="logo" src="../image/logo_jt.jpg"> <span class="line"></span> <span class="regist">欢迎注册</span> </div> <!-- 第二行 --> <div id="line2"> <span> 已有帐号? <a href="#"> 请登录 </a> </span> </div> </div> <!-- 主体内容 --> <div id="body"> <form> <table> <tr><!-- 用户名输入框 --> <td>

CSS媒体查询总结

心已入冬 提交于 2020-03-05 15:19:57
1媒体查询概念 一个 媒体查询 由一个可选的媒体类型和零个或多个使用媒体功能限制样式表范围的表达式组成, 例如 宽度,高度和颜色。在 CSS3 中添加的 媒体查询 ,允许内容的呈现针对一个特定范围的输出设备而定制,而不必改变内容本身。 2媒体查询的两种引入方式 <!-- link元素中的CSS媒体查询 --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- 样式表中的CSS媒体查询 --> <style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style> 3逻辑操作符 可以使用 not ,and 和 only 等逻辑操作符 构建复杂的媒体查询。 and 操作符用来把多个 媒体属性 组合成一条媒体查询。只有当每个属性都为真时,结果才为真。 not 操作符用来对一条媒体查询的结果进行取反。 only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。若使用了 not 或 only 操作符,必须明确指定一个媒体类型。 and and 关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询,即一个媒体属性与默认指定的 all

css 学习笔记

折月煮酒 提交于 2020-03-03 15:02:49
CSS: 页面美化和布局控制 概念:Cascading Style Sheets 层叠样式表 好处: 功能强大 将内容展示和样式控制分离,降低耦合度 CSS 的使用: 内联样式。 如 <div style=> hello css </ div> 内部样式:在 head 标签内,定义 style 标签 外部样式:定义 css 资源文件,在 head 标签内,定义 link 标签,引入外部的资源文件。如: <!-- a.css --> div{ color: green; } <link rel="stylesheet" href ="css/a.css"> CSS 语法 格式:选择器 { 属性名1:属性值1; 属性名2:属性值2; … } 选择器:筛选具有相似特征的元素 选择器 基础选择器 id 选择器 #div_id{ } 元素选择器 标签名称{ } 类选择器:选择具有相同的 class 属性值的元素。.class 属性值 { } 扩展选择器: 选择所有元素:*{ } 并集选择器: 选择器1,选择器2 { } 子选择器:选择器1 选择器2{ }。筛选选择器1中的选择器2 父选择器:选择器1 > 选择器2 {}。筛选选择器2的父标签选择器1 属性选择器:选择元素名称,属性名=属性值的元素。元素名称[属性名=属性值] 伪类选择器:选择一些元素具有的状态 属性 字体、文本 font

css基础

不想你离开。 提交于 2020-03-02 22:24:35
1.外部样式表 解决多页面重复问题;有利于浏览器缓存,从而提高页面响应速度;有利于代码分离 <link rel="stylesheet" href="css文件路径"/>外部样式表一般写在<head>中 2.颜色属性表达 rgb( , , ) ,hex( , , )16进制 括号中分别对应红绿蓝的值,也可以直接写十六进制代码 这里有 rgb颜色值与十六进制颜色码转换工具 链接 3.每个元素都必须有字体大小(font-size),如果没有声明,则直接使用父元素的字体大小,如果没有父元素(html)则使用基准字号(浏览器默认),其中: i,em元素默认样式为倾斜字体, <strong> 元素表示重要不能忽视的内容(加粗) 4.text-decoration 文本修饰,给文本家线(下划线,可以取none) <del> 错误内容, <s> 表示过期内容 text-indent 文本缩进 5.text-align元素内部文字水平排列方式(left,right,center) 6.letter-space 文字间隙 7.选择器(重点) *{通配选择器} [属性]{属性选择器} 伪类选择器(选中某些元素的某种状态) ☆☆☆爱恨法则☆☆☆ ①link元素 (未访问时的状态) ②visited元素(访问后的状态) ③hover元素(鼠标悬停时的状态) ④active(鼠标点击时的状态) love

css中关于单位的一些问题

妖精的绣舞 提交于 2020-03-02 21:46:25
Css中关于单位的一些问题 相对字体长度: Em: Em 是一个相对单位。起初 排版度量 时是基于当前字体大写字母”M”的尺寸的。当改变font-family时,它的尺寸不会发生改变,但在改变font-size的大小时,它的尺寸就会发生变化。 在没有任何CSS规则的前提下, 1em的长度 是: 1em=16px=0.17in=12pt=1pc=4.2mm=0.42cm Em单位有点古怪,当设置了font-size属性后,它会逐级向上相乘,所以如果一个设置了font-size:1.1em的元素在另一个设置了font-size:1.1em的元素里,而这个元素又在另一个设置了font-size:1.1em的元素里,那么最后计算的结果是1.1X1.1X1.1=1.331rem(根em)。这意味着即使一个元素设置为10em,这个元素也不会在他出现的每个地方都是10em。如果font-size变化了,它可能会宽点,也可能会窄点。 Rem: Rem和em一样也是一个相对单位,但是和em不同的是rem总是相对于根元素(如:root{}),而不像em一样使用级联的方式来计算尺寸。 Point: Point是一个物理度量单位,1pt=1/72 in.在CSS之外point是最常用的尺寸类型(可能这就是css支持point的原因)。它在语言里也很常见“当然他们把这个重要的信息设置成了小八号字体”