CSS基础篇

1
div class="syntaxhighlighter html"> ?
1
2
3
4
5
6
head
...
style type="text/css"
...此处写CSS样式
/style
/head




3.导入式
将一个独立的.css文件引入HTML文件中,导入式使用@import 引入外部CSS文件,style标记也是写在head标记中。

导入式会在整个网页装载完后再装载CSS文件。

?
1
2
3
4
5
6
head
...
style type="text/css"
@import "My.css"; 此处注意.css文件的路径
/style
/head




4.链接式
将一个独立的.css文件引入到HTML文件中,使用link标记写在head标记中。

链接式会以网页文件主体装载前装载CSS文件。

?
1
2
3
4
head
...
link href="My.css" rel="stylesheet" type="text/css"
/head




  

1
2
3
.nick {
color: yellow !important;
}




选择器(Selector)

基本选择器:

1
* {color: yellow}




1
div {color: yellow}




1
2
.Mycolor {color: yellow}
h3 class="Mycolor"nick/h3




1
2
#Mycolor {color: yellow}
h3 cellpadding="0"> 1
2
3
h3,h4 {color: yellow;}
h3Nick/h3
h4Jenny/h4




1
2
3
4
5
6
7
8
div p {color: yellow;}

div
pNick/p
div
pNick/p
/div
/div




1
2
3
4
5
6
div p {color: yellow;}

div
pNick/p
pNick/p
/div




1
2
3
4
div + p {color: yellow;}

divNick/div
pNick/p




  

1
2
3
4
5
6
7
8
9
10
11
[title]
{
color: yellow;
}
p[title]
{
color: yellow;
}

div titleNick/div
p titleNick/p




2.[title=Nick]

设置所有title属性等于“Nick”的标签元素。

?
1
2
3
4
5
6
[title="Nick"]
{
color: yellow;
}

p title="Nick"Nick/p




3.[title~=Nick]

设置所有title属性具有多个空格分隔的值、其中一个值等于“Nick”的标签元素。

?
1
2
3
4
5
6
7
[title~="Nick"]
{
color: yellow;
}

p title="Nick Jenny"Nick/p
p title="Jenny Nick"Nick/p




4.[title|=Nick]

设置所有title属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以"Nick"开头的标签元素。

例:lang属性:"en"、"en-us"、"en-gb"等等

?
1
2
3
4
5
6
[title|="Nick"]
{
color: yellow;
}

p title="Nick-Jenny"Nick/p




5.[title^=Nick]

设置属性值以指定值开头的每个标签元素。

?
1
2
3
4
5
6
[title^="Nick"]
{
color: yellow;
}

p title="NickJenny"Nick/p




6.[title$=Nick]

设置属性值以指定值结尾的每个标签元素。

?
1
2
3
4
5
6
[title$="Nick"]
{
color: yellow;
}

p title="JennyNick"Nick/p




7.[title*=Nick]

设置属性值中包含指定值的每个元素

?
1
2
3
4
5
6
[title*="Nick"]
{
color: yellow;
}

p title="SNickJenny"Nick/p




  

1
2
3
4
5
6
a:link{color: black}
a:hover{color: yellow}
a:active{color: blue}
a:visited{color: red}

a href="#"Nick/a




2. 1
2
3
4
5
6
7
8
9
10
11
p {
color: yellow;
}
p:before{
content: "before...";
}
p:after{
content: "after...";
}

p Nick /p  




常用属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleTitle/title
!--link href="cc2.css" rel="stylesheet" type="text/css"--
style
div {
width: 100px;
height: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/style
/head
body
div索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁/div
/body
/html




text-decoration:文本的装饰

  • none 默认。
  • underline 下划线。
  • overline上划线。
  • line-through 中线。

text-shadow:文本阴影

  • 第一个参数是左右位置
  • 第二个参数是上下位置
  • 第三个参数是虚化效果
  • 第四个参数是颜色
  • text-shadow: 5px 5px 5px #888;

word-wrap:自动换行

  • word-wrap: break-word;
+ View Code?
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
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleTitle/title
style
p {
width: 150px;
height: 160px;
background-color: #FFA500;
/*边框阴影*/
box-shadow: 10px 10px 5px #888;
/*自动换行*/
word-wrap: break-word;
}
h1 {
text-shadow: 5px 5px 5px #888;
}
/style
/head
body
p
When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look
/p
h1索宁/h1
/body
/html




                 

a {
    text-decoration: none;
    /*去除a标签下划线*/
}

去除a标签下划线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleTitle/title
style
div {
border:2px solid;
border-radius:25px;
width: 140px;
}
/style
/head
body
div
点赞哦!dear.
/div
/body
/html




+ View Code?
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
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleTitle/title
style
.radius1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 20px;
}
.radius2 {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
border-radius: 20px 35px;
}
.radius3 {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 20px 35px 50px;
}
.radius4 {
display: inline-block;
width: 100px;
height: 100px;
background-color: green;
border-radius: 20px 35px 50px 60px;
}
/style
/head
body
div
span class="radius1"/span
span class="radius2"/span
span class="radius3"/span
span class="radius4"/span
/div
/body
/html




  

边框实现各种三角符号:

+ View Code?
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleTitle/title
style
.triangle-one {
display: inline-block;
border-top: 50px red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-two {
display: inline-block;
border-top: 0 red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-stree {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-four {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 0 yellow solid;
border-left: 50px blue solid;
}

.triangle-five {
display: inline-block;
border: 50px transparent solid;
border-top: 50px red solid;
}
.triangle-six {
display: inline-block;
border: 50px transparent solid;
border-bottom: 50px yellow solid;
}
.triangle-seven {
display: inline-block;
border: 50px transparent solid;
border-top: 60px red solid;
border-right: 0;
}
.triangle-eight {
display: inline-block;
border: 50px transparent solid;
border-left: 30px yellow solid;
border-bottom: 0;
}
/style
/head
body
div class="triangle-one"/div
div class="triangle-two"/div
div class="triangle-stree"/div
div class="triangle-four"/div
div class="triangle-five"/div
div class="triangle-six"/div
div class="triangle-seven"/div
div class="triangle-eight"/div
/body
/html




+ View Code?
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
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleTitle/title
style
.back {
width: 1000px;
height: 1000px;
margin: 0 auto;
background-color: #ddd;
position: relative;
}
.back-in {
position: absolute;
width: 1020px;
height: 45px;
left: -20px;
top: 50px;
background-color: #2F4F4F;
}
.back-img {
border: 20px solid transparent;
border-top: 10px solid dimgrey;
border-right: 0;
display: inline-block;
position: absolute;
top: 95px;
left: -20px;
}
.back-font {
line-height: 9px;
margin-left: 30px;
color: white;
}
/style
/head
body
div class="back"
div class="back-in"h3 class="back-font"妹子求关注 ^.^/h3/div
div class="back-img"/div
/div
/body
/html




padding:用于控制内容与边框之间的距离;

margin: 用于控制元素与元素之间的距离;

padding、margin 表示上右下左都应用
padding-top、margin-top
padding-right、margin-right
padding-bottom、margin-bottom
padding-left、margin-left

    

一个参数,应用于四边。

  两个参数,第一个用于上、下,第二个用于左、右。

  三个参数,第一个用于上,第二个用于左、右,第三个用于下。


边框在默认情况下会定位于浏览器窗口的左上角,但是并没有紧贴着浏览器的窗口的边框,这是因为body本身也是一个盒子,外层还有html,
在默认情况下,body距离html会有若干像素的margin,所以body中的盒子不会紧贴浏览器窗口的边框了。

解决方法:
body {
    margin: 0;
}


浏览器窗口最外层边框缝隙

    

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
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleTitle/title
style
.z-index1 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
z-index: -1;
}
.z-index2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 20px;
left: 20px;
z-index: 5;
}
/style
/head
body
div class="z-index1"/div
div class="z-index2"/div
/body
/html




        

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleTitle/title
style
.zoom1 {
zoom: 100%;
}
.zoom2 {
zoom: 150%;
}
.zoom3 {
zoom: 200%;
}
/style
/head
body
div class="zoom1"Nick 100%/div
div class="zoom2"Nick 200%/div
div class="zoom3"Nick 300%/div
/body
/html




  

!DOCTYPE html
html lang="en"
head
    meta charset="UTF-8"
    titleTitle/title
    !--link href="cc2.css" rel="stylesheet" type="text/css"--
    style
        body {
            cursor: url("mouse.png"), auto;
            /*图片地址:http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/
        }
    /style
/head
body
    divimg src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"/div
/body
/html

自定义光标实例

Auto: 默认
Defau< : 默认
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Crosshair
Pointer
Move
text
wait
help

not-allowed

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
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titlenick/title
meta charset="utf-8" /
style type="text/css"
div {
border: 1px solid black;
height: 30px;
width: 30px;
background-color: yellow;

/*transform-origin: 50px 50px;*/
transform-origin: left;
transform: rotate(50deg);
/*transform: skew(50deg,50deg);*/
/*transform: translate(50px,50px);*/
/*transform: scale(2);*/
}
/style
/head
body
div/div
/body
/html





Transition 平滑过渡

  • transition-property: 变换的属性(none(没有属性改变)、all(所有属性改变)、具体属性)
  • transition-duration: 变换持续时间
  • transition-timing-function: 变换的速率(ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线))
  • transition-delay: 变换延迟时间
  • transition: 缩写
#property 指定属性对应类型

1、color: 通过红、绿、蓝和透明度组件变换(每个数值单独处理),如:background-color,border-color,color,outline-color等CSS属性;

2、len >h:真实的数字,如:word-spacing,width,vertical- align,top,right,bottom,left,padding,outline-width,margin,min-width,min- height,max-width,max-height,line-height,height,border-width,border- spacing,background-position等属性;

3、percentage:真实的数字,如:word-spacing,width,vertical- align,top,right,bottom,left,min-width,min- height,max-width,max-height,line-height,height,background-position等属性;

4、integer 离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生,如:outline-offset,z-index等属性;

5、number真实的(浮点型)数值,如:zoom,opacity,font-weight等属性;

6、transform list。

7、rectangle:通过x、 y、 width和height(转为数值)变换,如:crop;

8、visibility:离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility;

9、shadow:作用于color、x、y、和blur(模糊)属性,如:text-shadow;

10、gradient:通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image;

11、paint server (SVG):只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似;

12、space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化;

13、a shorthand property:如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化。

property 指定属性对应类型
#支持执行transition效果的属性

Property Name    Type
background-color    as color
background-position    as repeatable list of simple list of len >h, percentage, or calc
border-bottom-color    as color
border-bottom-width    as len >h
border-left-color    as color
border-left-width    as len >h
border-right-color    as color
border-right-width    as len >h
border-spacing    as simple list of len >h
border-top-color    as color
border-top-width    as len >h
bottom    as len >h, percentage, or calc
clip    as rectangle
color    as color
font-size    as len >h
font-weight    as font weight
height    as len >h, percentage, or calc
left    as len >h, percentage, or calc
letter-spacing    as len >h
line-height    as either number or len >h
margin-bottom    as len >h
margin-left    as len >h
margin-right    as len >h
margin-top    as len >h
max-height    as len >h, percentage, or calc
max-width    as len >h, percentage, or calc
min-height    as len >h, percentage, or calc
min-width    as len >h, percentage, or calc
opacity    as number
outline-color    as color
outline-width    as len >h
padding-bottom    as len >h
padding-left    as len >h
padding-right    as len >h
padding-top    as len >h
right    as len >h, percentage, or calc
text-indent    as len >h, percentage, or calc
text-shadow    as shadow list
top    as len >h, percentage, or calc
vertical-align    as len >h
visibility    as visibility
width    as len >h, percentage, or calc
word-spacing    as len >h
z-index    as integer

transition 支持的属性

鼠标放在以下图片上,There will be a miracle:


!DOCTYPE html
html
head
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
    titlenick/title
    meta charset="utf-8" /
    style type="text/css"
        .img-see-2016-7-2 {
            background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg");
            background-size: 660px;
            background-repeat: no-repeat;
            height: 300px;
            width: 600px;

            transition-duration: 30s;
            transition-timing-function: ease;
            transition-property: background-size;
        }
        .img-see-2016-7-2:hover {
            background-size: 2000px;
        }
    /style
/head
body
    div class="img-see-2016-7-2"/div
/body
/html

上效果图代码


CSS基础篇

原文地址:http://www.cnblogs.com/chenyangqit/p/7259721.html


最新回复(0)
/jishu2r_2F2Vh_2B6cAWb9G94NifGFUBQHN4js6KSNsrplg_3D_3D4719357
8 简首页