常用css样式
时间:2020-03-26
本文章向大家介绍常用css样式,主要包括常用css样式使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
/*CSS速查总表 --作者:Shifone*/ /* http://css.cuishifeng.cn/ */ /* 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/2013/06/%E4%BC%AA%E5%85%83%E7%B4%A0-%E8%A1%A8%E5%8D%95%E6%A0%B7%E5%BC%8F-pseudo-elements-style-form-controls/ */ /* 查看浏览器自带样式 “开发者工具” -> 右上角的竖着的三个点 -> “setting” -> 勾选 Elements 中的 “Show user agent shadow DOM” */ /* @import url("style.css") 引入另一个css文件*/ /* @charset "utf-8"; css文件中有中文时申明 */ /*区分class css的类带有 _css 用于写js的类带有 _js */ /*相邻选择符(E+F)*/ /*兄弟选择符(E~F)*/ /*与 包含选择符(E F) 不同的是,子选择符(E>F)只能命中子元素,而不能命中孙辈*/ /*E[att] 选择具有att属性的E元素*/ /*E[att="val"] 选择具有att属性且属性值等于val的E元素*/ /* transparent 兼容IE9+ */ /* transform 兼容IE9+ */ /* opacity 兼容IE9+ */ /* border-radius 兼容IE9+ */ /* background-size 兼容IE9+ */ /* transition 兼容IE10+ */ /* animation 兼容IE10+ */ /*点击穿透: pointer-events: none 的两个应用场景 通过设置pointerEvents的属性为none解决了,你可以“div 穿透”详细了解下 http://www.cnblogs.com/GongQi/p/4074609.html?utm_source=tuicool&utm_medium=referral */ .text_indent { /* 文字开头缩进 */ text-indent: 2em; } /* contenteditable 属性指定元素内容是否可编辑。 <p contenteditable="true">这是一个可编辑段落。</p> */ /* 遇到背景图片与颜色叠加效果 background-color写在后面才能实现效果 */ .bg-clr { /* background:url(); */ background-color: rgba(255, 255, 0, 0.2); } .transform_rotate:hover { transform: rotate(180deg); -ms-transform: rotate(180deg); /* IE9+ */ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); /* transform: translate(100px,100px) x轴,y轴 */ /* transform: scale(2) 放大2倍 */ } .transition:hover { -webkit-transition: all 0.3s; transition: all 0.3s; /* IE10+ */ -moz-transition: all 0.3s; } /* 伪类 */ a:link { /* 初始状态 */ color: red; } a:visited { /* 访问后状态 */ color: red; } a:hover { /* 悬停状态 */ color: red; } a:active { /* 点击不放时状态 */ color: red; } p:first-letter { /* 改变第一个文字 */ color: red; } p:first-line { /* 改变第一行文字 */ color: red; } p:before { content: "在开始处增加文字" } p:after { content: "在结尾处增加文字" } div::before { /* IE9+ */ /* HTML结构: <div data-msg="类title框展示" style="position:relative;"> Hover ME</div> */ /* content:attr(data-msg); */ content: "伪元素"; position: absolute; top: -50px; left: 10px; padding: 2px 6px; display: inline-block; color: #333; border: 1px solid #333; border-radius: 5px; font-size: 14px; } div::after { /* IE9+ */ content: ""; border-top: 5px solid #333; border-left: 5px solid transparent; border-right: 5px solid transparent; position: absolute; top: -6px; left: 60px; } /*<div> <p>1</p> <span>2</span> <p>3</p> <span>4</span> </div>*/ div p:nth-child(2n-1) { /* 总奇数 IE9.0+ */ color: #f00; } div p:nth-of-type(2n) { /* 只选择 p元素 的偶数 IE9.0+ */ color: #f00; } p:last-of-type { /* IE9.0+ */ color: #f00; } p:first-of-type { /* IE9.0+ */ color: #f00; } p:last-child { /* IE9.0+ */ color: #f00; } p:first-child { /* IE7.0+ */ color: #f00; } .background { /* 背景图片固定 */ background-attachment: fixed; background-image: url(); background-color: #f00; background-repeat: no-repeat; /* background-repeat: repeat-x; */ /* background-repeat: repeat-y; */ /* background-position: left top */ /* background-size: 宽 高 */ /* background-size:contain; 图片重复直到覆盖内容 */ /* background-size:cover; 图片无限放大覆盖内容 */ } .border { border: 1px solid #f00; /* border-style:dotted 点线 */ /* border-style:dashed 虚线 */ } /*以省略号形式显示文字过多 单行溢出*/ .ellipsis_nowrap { display: inline-block; width: 370px; overflow: hidden; /* overflow:visible 默认值 对溢出内容不做处理,内容可能会超出容器。 */ /* overflow: auto 有溢出时出现滚动条 */ text-overflow: ellipsis; white-space: nowrap; /* 设置了word-wrap:break-word的时候 IE8中需要设置成normal */ word-wrap: normal; /* 多行溢出 IE和火狐暂不支持*/ /* display: -webkit-box; 可伸缩的盒子 */ /* -webkit-line-clamp: 2; 省略号在第几行显示 */ /* -webkit-box-orient: vertical; 在垂直方向有溢出 */ } /*清除IE10+默认下拉按钮*/ select::-ms-expand { display: none; } .appearance, select { appearance: none; /* 去除系统默认的样式 */ -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari 和 Chrome */ } /*手掌形*/ .cursor { cursor: pointer; } /*禁用形*/ .cursor { cursor: not-allowed; } .opacity { filter: alpha(opacity=50); /* IE8 */ opacity: 0.5; /* IE9+ 以及其他浏览器 */ } /* 去掉搜狗浏览器input type="password" 时出现的键盘*/ input::-webkit-input-safebox-button { display: none; } input::-webkit-input-placeholder { color: #999; } input:-ms-input-placeholder { /* IE10+ */ color: #999; } input:-moz-placeholder { /* Firefox4-18 */ color: #999; } input::-moz-placeholder { /* Firefox19+ */ color: #999; } /*去除ie中input的叉和密码框的眼睛*/ input::-ms-clear, input::-ms-reveal { display: none; } /* 禁止复制 */ .user_select { /*unselectable针对IE onselectstart针对Chrome、Safari -moz-user-select是firefox专有的 <div unselectable="on" onselectstart="return false;"> some text </div> */ -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } /*去除webkit中Cookie默认背景色*/ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { box-shadow: 0 0 0px 1000px #ffffff inset; -webkit-box-shadow: 0 0 0px 1000px #ffffff inset; background-color: #ffffff !important; } /* 去除webkit中input的type="number"时出现的上下图标 */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"] { /* 火狐 */ -moz-appearance: textfield; } .clear:after { content: ""; display: block; clear: both; } .borde_radius { /* IE9+ */ -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .border_box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* 仅仅被Firefox浏览器识别的写法 */ @-moz-document url-prefix() { .demo { color: red; } } /* Webkit枘核浏览器(chrome and safari) */ /*设置line-height时 safari浏览器中input焦点光标会跟line-height一样高*/ @media screen and (-webkit-min-device-pixel-ratio:0) { input { line-height: normal; } } /*只对Chrome设置样式 用JS检查 window.chrome ,然后 document.head.appendChild( StyleSheetLink ) */ /*只针对safari*/ input { [; line-height: normal; ] } /*只针对 IE8+ 设置line-height*/ input { outline: none; line-height: 50px\9; /* IE8+ 到 IE10 有效 对 IE11+ 无效 IE11+ 中无需设置line-height */ } /* Opera浏览器 */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { color: red; } } /* iPhone / mobile webkit */ @media screen and (max-device-width: 480px) { .demo { color: red } } /*去掉a标签的选中边框*/ /*IE 在Html代码内加 hidefocus="true" <a href="#" hidefocus="true">链接</a> */ a:focus { /*非IE*/ outline: none; } /* 媒体类型和查询条件 IE9+ */ /* 如果文档(body)宽度小于 1600 像素则修改背景颜色(background-color): */ @media screen and (max-width: 1600px) { .media_screen { height: 350px; width: 100%; background-color:lightblue; } } @media only screen and (max-width: 1600px) and (min-width: 1000px) { .media_screen { height: 350px; width: 100%; } } @-webkit-keyframes cirturn { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes cirturn {} @-moz-keyframes cirturn {} .keyframes_cirturn { /* 动画:动画名 执行一次时间 匀速(linear) 执行次数无限次(infinite)*/ -webkit-animation: cirturn 1s linear infinite; -moz-animation: cirturn 1s linear infinite; animation: cirturn 1s linear infinite; /* IE10+ */ } .box { box-shadow: 20px 20px 5px red inset; /* 右 下 模糊度 颜色 内投影 */ } .font { font-family: "microsoft yahei"; /* font-weight:lighter 轻 / normal 常规 / bold 重 */ /* text-decoration: underline; 设置为none取消a链接默认下划线 */ text-shadow: 2px 5px 2px red; /* 水平距离 垂直距离 模糊程度 颜色 */ /* letter-spacing: 10px; 字间距 */ /* white-space: nowrap; 强制一行显示 */ /* white-space: normal; 常规显示 */ /* word-wrap:break-word; 自动换行 ---如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。*/ /* word-break: break-all 允许在单词内换行。 */ text-align: justify; text-align-last: justify; vertical-align: middle; } @font-face { font-family: "自命名"; src: url("字体图标文件"); } div { font-family: "自命名"; } div:before { content: "\名字" } li { list-style: none; } .gradient { /* 线性渐变 */ background: linear-gradient(to left, red blue); /* 文字渐变时使用 */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; /* background: linear-gradient(red,blue) 径向渐变 */ } /* 占位隐藏 */ div { opacity: 0; opacity: 1; visibility: hidden; visibility: visible; } /* 分栏 */ .text { -webkit-column-count: 2; -webkit-column-rule: 1px red solid; } /* 双飞翼布局 */ .box { position: relative; width: 80%; min-width: 500px; } .box .left { width: 200px; position: absolute; left: 0; top: 0; } .box .content { /* 中间div 宽度自适应 */ margin-left: 200px; } .box .right { width: 200px; position: absolute; right: 0; top: 0; } /* 三角形 */ div { width: 0; height: 0; border-style: solid; border-width: 0px 10px 10px 10px; border-color: transparent transparent red transparent; } /* 弹性盒子布局 */ .flex_box { display: flex; flex-direction: row; /* flex-direction: column; */ } .flex_box .left { flex-grow: 2; flex-basis: 0; } .flex_box .right { flex-grow: 3; flex-basis: 0; /* 按照 2:3 的比例分;需要再分加 display: flex; */ }
原文地址:https://www.cnblogs.com/lijh03/p/12575153.html
- 简谈RGW的index shard计算
- Blackpearl 的 Impersonate
- SparkMLLib中基于DataFrame的TF-IDF
- 运用Python实现WordPress网站大规模自动化发布文章
- 基于java的中文分词工具ANSJ
- 基于DF的Tokenizer分词
- 基于pyenv和virtualenv搭建python多版本虚拟环境
- 基于DataFrame的StopWordsRemover处理
- 案例:Spark基于用户的协同过滤算法
- 请别再问我Spark的MLlib和ML库的区别
- Spark的Ml pipeline
- EasyUI 创建 CRUD 应用
- phoenix二级索引
- Phoenix边讲架构边调优
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例