CSS基础

runoob

 

渐进色
background: linear-gradient(to bottom right, #ffe5bc, #fff7eb, #ffe5bc);

button
样式
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
禁用样式
.disabled {
opacity: 0.6;
cursor: not-allowed;
}

文本效果
{ text-shadow: 5px 5px 5px #FF0000; }

背景
#id {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}

图片边框
<div id="round">round平铺（重复）</div>
<div id="stretch">stretch 拉伸 </div>
<img src="/images/border.png" />

div
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}

#round
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

#stretch
{
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}


阴影
box-shadow: 10px 10px 5px #888888;
圆角 border-radius
四个值: 左上角，右上角，右下角，左下角
三个值: 左上角, 右上角和左下角，右下角
两个值: 左上角与右下角，右上角与左下角
一个值： 四个圆角值相同
div
{
border:2px solid;
border-radius:25px;
}

CSS3 上

属性选择器
<h1 title="Hello world">Hello world</h1>
[title] { color:blue; }

<a title="runoob" href="http://www.runoob.com/">runoob</a>
[title=runoob] { border:5px solid green; }
// lang=“sx-en” //包含 en
[lang|=en]{ }

input[type="button"]
[attribute$=value] 属性的后几个字母是 value 就可以，例如：
[lang^=en] --> <p lang="ennn">

图片拼接
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>

图片廊
<div class="responsive">
<div class="img">
<a target="_blank" href="http://demo/demo1.jpg">
<img src="http://demo/demo1.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div>

div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}

div.img:hover {
border: 1px solid #777;
}

div.img img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}

提示信息
<div class="tooltip">鼠标移动到我这
<span class="tooltiptext">提示文本</span>
</div>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
顶部提示框/底部箭头：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* 提示工具底部 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
底部提示框/顶部箭头：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* 提示工具头部 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
右侧提示框/左侧箭头：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* 提示工具左侧 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
左侧提示框/右侧箭头：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* 提示工具右侧 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}

下拉菜单
<div class="dropdown">
<span>鼠标移动到我这！</span>
<div class="dropdown-content">
<p>sx</p>
<p>www.ysx.com</p>
</div>
</div>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
淡入效果
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
opacity: 1;
}

导航
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

所有伪
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个<p> 元素的第一个字母
:first-line p:first-line 选择每个<p> 元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
:lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值

伪元素
<p>使用 "first-line" 伪元素向文本的首行设置特殊样式。</p>
p:first-line {
color:#ff0000;
font-variant:small-caps;
}
before" 伪元素可以在元素的内容前面插入新内容
after 、、、、、、之后插入
h1:before
{
content:url(smiley.gif);
}

伪类(Pseudo-classes)
语法
selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}
eg：
<p>This is some text.</p>
<p>This is some text.</p>
p:first-child { color:blue; } //第一个<p> blue

eg：匹配的所有<p>元素的第一个 <i> 元素
<p>I am a <i>strong</i> man <i>strong</i> man.</p>
<p>I am a <i>strong</i> mama<i>strong</i> man.</p>
p > i:first-child { color:blue; } //
p:first-child i { color:blue; } //第一行所有i

组合选择器
后代选择器(以空格分隔) div p
子元素选择器(以大于号分隔） div>p
相邻兄弟选择器（以加号分隔） div+p 位于 <div> 元素后的第一个 <p> 元素
普通兄弟选择器（以破折号分隔） div~p 所有 <div> 元素之后的所有相邻兄弟元素 <p>

浮动 float:left;
清除
.text_line
{
clear:both;
}

居中 margin: 0 auto;

定位 Position
static 没有定位，元素出现在正常的流中
relative 相对定位元素的定位是相对其正常位置
fixed 元素的位置相对于浏览器窗口是固定位置
absolute 定位的元素和其他元素重叠，文档流无关，不占据空间
sticky 用户的滚动位置来定位 // 粘性定位
eg:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
EG:
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
隐藏
display:none 隐藏元素，且隐藏的元素不会占用任何空间
visibility:hidden 隐藏元素，占用与未隐藏之前一样的空间

分组 嵌套
h1{color:green;}
h2{color:green;} 同 h1,h2{color:green;}

.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
eg: <div class="marked"> <p>ysx。</p> </div>

p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式
eg: <p class="marked">带下划线的 p 段落。</p>

 

填充 padding 用法 同 margin用法
义元素边框与元素内容之间的空间，即上下左右的内边距

外边框
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度
border:1px solid red;
outline-style:solid;
outline-width:thin; //3px

边框样式 border:5px solid red;
border-style
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
各边单独
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;

div {
background-color: red;
width: 300px;
border: 5px solid green; 围绕在内边距和内容外的边框。
padding: 25px; 清除内容周围的区域，内边距是透明的
margin: 25px; 清除边框外的区域，外边距是透明的
} Content(内容) - 盒子的内容，显示文本和图像

表格 边框
table {
border-collapse: collapse;
}
table,th,td {
border:1px solid black;
}

列表样式 ul
list-style-type circle square upper-roman lower-alpha
ul
{
list-style-image: url('sqpurple.gif');
}

链接样式 顺序不可变
a:link {color:#000000;background-color:#B2FF99;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */

字体大小 font-size

字体样式 font-style
p.italic {font-style:italic;}

字体
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}

文本缩进
p {text-indent:50px;}

文本转换
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文本下划线
a {text-decoration:none;}

{
background-image:url("/images/back40.gif");
background-repeat:no-repeat;
background-repeat:repeat-x;
background-position:right top;
}

<p class="center">这个段落居中对齐。</p>
<p class="main">这个段落居中对齐。</p>
p.center { text-align:center; }
p.main {text-align:justify;} //正文两边对齐