css
时间:2019-03-11
本文章向大家介绍css,主要包括css使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
style标签 h1头 p正文
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
行内样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;
color:green;">直接在HTML标签中设置的样式</p>
链接外部样式
<link href="css/common.css" rel="stylesheet" type="text/css" />(而后在外部规划样式)
导入外部样式
<style >
@import url("css/common.css");
</style>
优先级
行内样式>内部样式表>外部样式表
就近原则
类选择器
<style type="text/css">
.green {
font-size: 20px;
color: green;
}
</style>
<p class="green">有勇气就会有奇迹。</p>
id选择器
#first {
font-size: 16px;
}
<p id="first">北京欢迎你,有梦想谁都了不起!</p>
选择器优先级
无论何时:ID选择器>类选择器>标签选择器
层次选择器
<style type="text/css">
p,ul{border: 1px solid red;} (边界编辑)
.active~p{ background: yellow; }
</style>
<p>1</p> 或
( <!-- 为了说明相邻兄弟选择器,在此处添加一个类名active -->)
<p>2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
后代选择器body p{ background: red; }
子选择器 body>p{ background: pink; }
相邻兄弟选择器.active+p { background: green; }
通用兄弟选择器.active~p{ background: yellow; }
first-child 作为父元素的第一个子元素的元素E
last-child 作为父元素的最后一个子元素的元素E
nth-child(n) 选择父级元素E的第n个子元素F,(n可以是1、2、3),关键字为even、odd
first-of-type 选择父元素内具有指定类型的第一个E元素
last-of-type 选择父元素内具有指定类型的最后一个E元素
nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
li p:nth-of-type(1){
color: #640000;
font-size: 14px;}
E[attr]属性选择器 a[id] { background: yellow; }
E[attr=val]属性选择器 a[id=first] { background: red; }
E[attr=val]属性选择器 a[id=first] { background: red; }
E[attr*=val]属性选择器 a[class*=links] { background: red; }
E[attr^=val]属性选择器 a[href^=http] { background: red; }
E[attr$=val]属性选择器 a[href$=png] { background: red; }
字体样式
font-family:"隶书";
font-size:12px;
font-style:(normal、italic和oblique);
font-weight:bold;normal;bolder;lighter;400(=noraml);700(bold)
font:italic bold 36px "宋体"; (合写)
字体属性的顺序:字体风格→字体粗细→字体大小→字体类型
p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}
文本属性
设置文本颜色 color:#00C;
设置元素水平对齐方式 text-align:right;
设置首行文本的缩进 text-indent:20px;
设置文本的行高 line-height:25px;
设置文本的装饰 text-decoration:underline;
文本阴影 text-shadow : color x-offset y-offset blur-radius;
排版文本段落 text-align:right;left;center;justify
垂直对齐 vertical-align属性:middle、top、bottom
none 默认值,定义的标准文本
underline 设置文本的下划线
overline 设置文本的上划线
line-through 设置文本的删除线
超链接伪类 a:hover {
color:#B46210;
text-decoration:underline;
}
a:link{color:#9ef5f9;} 未单击访问时超链接样式
a:visited {color:#333;} 单击访问后超链接样式
a:hover{color:#ff7300;} 鼠标悬浮其上的超链接样式
a:active {color:#999;} 鼠标单击未释放的超链接样式
无标记符号 list-style-type:none;
实心圆,默认类型 list-style-type:circle;
空心圆 list-style-type:circle;
实心正方形 list-style-type:none;
数字 list-style-type:decimal
background-image属性
background-image:url(图片路径);
background-repeat属性
repeat:沿水平和垂直两个方向平铺
no-repeat:不平铺,即只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺
background-position属性
Xpx Ypx
X% Y%
left、center、right
top、center、bottom
background-size
auto;percentage;cover;contain;
IE浏览器是Trident内核,加前缀:-ms-
Chrome浏览器是Webkit内核,加前缀:-webkit-
Safari浏览器是Webkit内核,加前缀:-webkit-
Opera浏览器是Blink内核,加前缀:-o-
Firefox浏览器是Mozilla内核,加前缀:-moz-
-webkit-linear-gradient ( position, color1, color2,…)
example
.title {
font-size:18px;
font-weight:bold;
color:#FFF;
text-indent:1em;
line-height:35px;
}
.title {
background: linear-gradient(to top, orange, blue);
background: -webkit-linear-gradient(to top, orange, blue);
}
/*background: linear-gradient(to bottom left, orange, blue);*/
/*background: -webkit-linear-gradient(to bottom left, orange, blue);*/
- 1627: [Usaco2007 Dec]穿越泥地
- 1651: [Usaco2006 Feb]Stall Reservations 专用牛棚
- 1615: [Usaco2008 Mar]The Loathesome Hay Baler麻烦的干草打包机
- Polyspace不认识Interrupt,肿么办?
- 1639: [Usaco2007 Mar]Monthly Expense 月度开支
- 1638: [Usaco2007 Mar]Cow Traffic 奶牛交通
- 1642: [Usaco2007 Nov]Milking Time 挤奶时间
- 1625: [Usaco2007 Dec]宝石手镯
- 1613: [Usaco2007 Jan]Running贝茜的晨练计划
- 1677: [Usaco2005 Jan]Sumsets 求和
- 1609: [Usaco2008 Feb]Eating Together麻烦的聚餐
- 1602: [Usaco2008 Oct]牧场行走
- 【LeetCode 500】关关的刷题日记27 Keyboard Row
- 1601: [Usaco2008 Oct]灌水
- 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 实例
- WebSth 指纹识别插件简要分析
- Android实现3D层叠式卡片图片展示
- Android Studio屏幕方向以及UI界面状态的保存代码详解
- webshell,禁止你执行
- android实现下拉菜单三级联动
- Flutter 假异步的实现示例
- 详解Android4.4 RIL短信接收流程分析
- android 使用kotlin 实现点击更换全局语言(中日英切换)
- EasySec基于XP的渗透平台
- Android集成腾讯X5实现文档浏览功能
- 8个小时8个小时的上机课!!
- Android实现根据评分添加星级条
- Android悬浮窗的实现(易错点)
- phpcms上传导致getshell详解及案例
- android popupwindow用法详解