css笔记214

发表于   |   分类于

很多css属性，在IE8之前必须声明<!DOCTYPE>

css选择器构成

css具有层叠特性，后面属性会掩盖前面属性

css构成：
选择器 {属性:值; 属性:值}

属性选择器: html的属性 h1/p 之类

id选择器：

1
2
3
4
5
6
7
#paral
{
    text-align:center;
    color:red;
}
<p id="paral">hello</p>

class选择器(类名第一个字符不能使用数字):

1
2
3
4
5
6
7
8
9
10
11
12
.center 
{
    text-align:center;
}
<p class="center">标题</p>
p.center/*它还有个嵌套选择器与它长得很像，但完全不同。下面有讲*/
{
    text-align:center;
}
<p class="center">这个要居中（且不能缺少class属性）</p>
<h1 class="center">这个不居中</h1>

:选择器:

1
2
3
4
5
:link {color:red; text-decoration:...}     /*所有未被访问的链接，一般用于<a/> 但也可用于其他dom，如: <p/>*/
:visited  /*所有已被访问链接，同上*/
:active     /*活动链接，同上*/
:hover     /**/
:focus     /**/

其它选择器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/*后代选择器*/
a p /*a子元素下的p*/
{
    color: green;
}
ul li /*ul子元素下的li*/
{
    background-repeat: no-repeat;
}
/*分组选择器*/
h1, h2, p
{...}
table, th, td
{
    border: 1px solid black;
}
/*嵌套选择器*/
.marked
{ background-color: red; }
.marked p
{ color: white; }
<div class="marked"><p>ddd</p></div>/*class为marked的元素，其子元素为p的会得到此css属性*/
/*子元素选择器*/
div>p
{ background-color: yellow; } /*它会严格按照div>p的层次顺序来找元素*/
/*相邻兄弟选择器*/
div+p+p
{ background-color: yellow; } /*它只会让div第二个相邻p元素的style改变*/
/*普通相邻兄弟选择器*/
div~p
{ background-color: yellow; } /*上面的选择器只能选择一个，这个会把所有具有此关系的元素选上*/
/*属性选择器*/
[title]
{ color: blue; } /*选择具有title属性的元素*/
[title=runoob]
{ color: blue; } /*选择title属性的值为runoob的元素*/
[title~=hello]
{ color: blue; } /*选择title属性的值包含有hello单词的元素,即hello有空格隔开就算包含*/
[title|=hello]
{ color: blue; } /*选择title属性的值包含有hello的元素,只要有hello出现就行*/

插入样式表

外部插入样式表：

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部插入样式表：

1
2
3
4
5
6
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
</style>
</head>

内联样式：

1
<p style="color:sienna;margin-left:20px">this is</p>

多重样式：

1
2
3
4
5
6
7
8
9
10
11
12
h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}
h3
{
    text-align:right;
    font-size:20pt;
}

它们将会重叠成一个。

层叠次序：

内联样式 > 内部样式 > 外部样式 > 浏览器缺省设置
这些层叠会继续替换和补充。

###　属性

1
2
3
4
5
6
7
8
9
10
11
12
13
background-repeat: no-repeat|repeat-x|repeat-y;/*背景图片重复平铺的方向*/
text-decoration: overline|line-through|underline;/*文字的横线位置(上方，中，下方)*/
text-transform: uppercase|lowercase|capitalize;/*文字转换(大写，小写，首字母大写)*/
text-indent: *px;/*文本第一行的缩进*/
font-size: *em;/*为避免ie无法调整文本问题，使用em单位代替*/
a: link {color:#FF0000;text-decoration:underline;}
list-style-type: circle|square|upper-roman|lower-alpha;/*列表标题 无序和有序*/
border: 25px solid green;
border-style: dotted|dashed|solid|double|groove|ridge|inset|outset;/*电线框、虚线框、实线、俩个边界、3d沟(有四个重载函数：上、右、下、左；上、左右、下；上下、左右；四边)*/
margin: /*重载：上、右、下、左；上、左右、下；上下、左右；四边;;auto中心对齐*/
Padding: /*同上*/
display: inline|block; /*只需要宽度，不强制换行；占用全部宽高，前后换行*/
position: fixed|relative|absolute /*相对浏览器窗口；相对自己的定位；相对父元素的定位。配合z-index来重叠*/

盒子

从外到内： Margin Border Padding Content

隐藏元素

1
2
display: none;/*隐藏某个元素，且元素不会占用任何空间*/
visibility: hidden;/*隐藏元素，但是隐藏的元素任占用与未隐藏前一样的空间*/

伪类

这个也是个选择器

1
2
3
4
5
6
p:first-child /*这个会指定到第一个p元素*/
{ color: blue; }
p > i:first-child /*第一个为p的子元素的i*/
{ color: blue; }
<p>I am a <i>zhege</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>zhege</i> man. I am a <i>strong</i> man.</p>

合并

1
2
3
4
5
6
7
8
9
.button 
{
    background-color: #4caf50;
}
.button2
{
    color: white;
}
<button class="button button2" /> /*这样就具有俩个属性了*/

下拉菜单

这儿类名字限定了，必须如此。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.dropdown {} /* 容器 <div> - 需要定位下拉内容 */
.dropbtn {} /* 下拉按钮样式 */
.dropdown-content {} /* 下拉内容 (默认隐藏) */
/* 下拉菜单的链接 */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;
}
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

图片

设置透明:

1
img { opacity: 0.4; filter: alpha(opcity=1)} /*一般是0.0-1.0,越小越透明。ie8和早期版本是0-100,越小越透明*/

拼合:

1
2
3
4
5
6
img.home 
{
    width: 46px;
    height: 44px;/*上面是指定显示图片的高宽*/
    background: url(...) 0 0;/*指定显示图片的路径和位置left top*/
}

图片廊

1
2
3
4
5
6
7
8
<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_fjords.jpg">
      <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>

css3

边框

圆角: border-radius
阴影：border-shadow
图片: border-image

1
2
3
4
5
6
#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;
}

// //