html盒子内字体颜色,css3选择器，颜色，文本，盒模型

属性选择器

div{

width: 300px;

height: 40px;

border: 1px solid #000;

text-align: center;

line-height: 40px;

margin-top:5px;

}

/*属性选择器

id选择器 #

类名选择器：.

属性选择器：[]

*/

/*

E[attr]：选中带有arrt 属性的E元素

E[attr="val"]:选中带有attr属性，且attr值为"val“的E元素

^ :开头 $:结束 *：包含

E[attr^="val"]:选中带有attr属性，且attr值为以"val“开头的E元素

E[attr$="val"]:选中带有attr属性，且attr值为以"val“结尾的E元素

E[attr*="val"]:选中带有attr属性，且attr值为包含"val“的E元素

*/

/*div[title]{*/

/*background-color: red;*/

/*}*/

/* 选中页面中的div 并且带有 class属性*/

/*div[class]{*/

/*background-color: red;*/

/*}*/

/* 选中页面中的div 并且带有 class属性， 属性的值等于 box7*/

/*div[class="box7"]{*/

/*background-color: red;*/

/*}*/

/* 选页面中div 并且 带有class属性，class属性以 aa开头*/

/*div[class^="aa"]{*/

/*background-color: red;*/

/*}*/

/* 选页面中div 并且 带有class属性，class属性以 bb结尾*/

/*div[class$="bb"]{*/

/*background-color: red;*/

/*}*/

/* 选页面中div 并且 带有class属性，class属性中包含 aa*/

/*div[class*='aa']{*/

/*background-color: red;*/

/*}*/

1

2

3

4

5

6

7

8

03-伪类选择器01.html

/* 伪类：

：link ：hover :active :visited

伪类的特点：以 ：开头

*/

.box{

width: 600px;

height: 430px;

margin:100px auto;

}

.box div{

width: 80px;

height: 80px;

border: 1px solid #333;

text-align: center;

line-height: 80px;

color:#666;

float: left;

font-size:24px;

margin-top:-1px;

margin-left:-1px;

}

/* 伪类选择器

: 标志性符号

*/

/* 选中 box 下面的div 第父盒子 中的第一个子元素*/

/*.box div:first-child{*/

/*background-color: red;*/

/*}*/

/* 选中 box 下面的div 第父盒子 中的最后一个子元素*/

/*.box div:last-child{*/

/*background-color: red;*/

/*}*/

/*选中box下的第18个盒子 */

/* :nth-child(n) n是也给整数 从1开始 1，2,3,4,5....

如果n小于等于0 无效 n ：正整数+0

*/

/*.box div:nth-child(28){*/

/*background-color: red;*/

/*}*/

/* 选中所有的box 下的div*/

/*.box div:nth-child(n){*/

/*background-color: pink;*/

/*}*/

/* 2n 选中所有的偶数*/

/*.box div:nth-child(2n){*/

/*background-color: red;*/

/*}*/

/* 2n-1 奇数*/

/*.box div:nth-child(2n+1){*/

/*background-color: red;*/

/*}*/

/* 奇数：odd 偶数：even*/

/*.box div:nth-child(odd){*/

/*background-color: red;*/

/*}*/

/*.box div:nth-child(even){*/

/*background-color: yellow;*/

/*}*/

/* 选中7的倍数+1 */

/*.box div:nth-child(7n+1){*/

/*background-color: red;*/

/*}*/

/*选中前5个*/

/*.box div:nth-child(-n+5){*/

/*background-color: red;*/

/*}*/

/*选中后5个*/

/* nth-last-child 从最后面开始选*/

/*.box div:nth-last-child(-n+5){*/

/*background-color: red;*/

/*}*/

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

伪元素before 和after

/*

伪元素： 伪 假的 元素：标签

通过css样式模拟出 标签的效果

css2 没有 伪元素的概念，只有伪类

E:before E:after 是伪类

css3: 伪元素

E::before

E::after

必须有 content:"";

*/

span{

color:red;

font-size:30px;

}

span::before{

content:"今天";

color:green;

width: 100px;

height: 100px;

background-color: blue;

display: inline-block;

border-radius: 50%;

}

span::after{

content:"真好！";

color:pink;

width: 100px;

height: 100px;

background-color: blue;

display: inline-block;

}

h1{

color: white;

}

天气

伪元素选择器first-letter.html

li::first-letter{

color:red;

font-size:40px;

}

• As long as the effort of deep strokes fell great oaks
• 只要功夫深，铁杵磨成针
• 深いストロークの努力が大きな樫の落ちた限り

css2透明颜色.html

.out{

width: 400px;

height: 400px;

background-color: blue;

margin:100px auto;

border: 1px solid #000;

/* 设置半透明*/

opacity:0.5;

}

.in{

width: 200px;

height: 200px;

background-color: red;

margin:100px auto;

/*当父盒子设置了透明度，再给子盒子设置透明度是不管用的*/

opacity: 1;

}

02-transparent透明.html

.out{

width: 400px;

height: 400px;

background-color: blue;

margin:100px auto;

border: 1px solid #000;

/*transparent 透明的*/

background:transparent;

}

.in{

width: 200px;

height: 200px;

background-color: red;

margin:100px auto;

}

03-RGBA颜色模式.html

.out{

width: 400px;

height: 400px;

/*background-color: blue;*/

margin:100px auto;

/*border: 1px solid #000;*/

border:20px solid rgba(255,0,0,0.5);

background:rgba(0,0,255,0.3);

font-size:40px;

font-family: "Microsoft Yahei";

color:rgba(0,255,0,0.4);

}

.in{

width: 200px;

height: 200px;

background-color: red;

margin:100px auto;

}

/*

在css3中提供了两种颜色模式

RGBA: r red g green B blue A alpha: 透明度

HSLA： H: 色调 S：饱和度 L:亮度 A alpha:透明度

*/

我是文字

01-文本的阴影效果.html

p{

font-size: 150px;

font-family: "Microsoft Yahei";

text-align: center;

line-height: 150px;

font-weight: bold;

/* 文字阴影： 水平位移 垂直位移 模糊程度 阴影颜色*/

text-shadow: 30px 23px 31px #333;

}

总有刁民想朕！

总有刁民想朕！

02-凹凸文字效果.html

body{

background-color: #666;

}

p{

font-size:120px;

text-align: center;

font-weight: bold;

font-family: "Microsoft Yahei";

color:#666;

}

/* text-shadow :文字阴影

可以设置多个阴影

每个阴影之间使用逗号隔开

text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;

*/

.ao{

text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;

}

.tu{

text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;

}

苍茫的天涯我的爱

苍茫的天涯我的爱

04-盒模型

div{

width: 250px;

height: 250px;

background-color: red;

margin-top:5px;

}

.box1{

border: 25px solid blue;

padding:25px;

box-sizing: content-box;

}

.box3{

border: 25px solid blue;

padding:25px;

box-sizing: border-box;

}

/*之前我们用盒子模型 都是外加模式

盒子的最终宽度=内容区域宽度+padding+border

*/

01-私有化前缀.html

.box{

width: 1100px;

height: 200px;

border: 1px solid #000;

margin:100px auto;

/* 背景渐变*/

/*

-webkit-： chrome safari 谷歌(webkit内核的) 苹果

-moz-：火狐

-ms-:ie

-o-:　欧朋

*/

/*background: -ms-linear-gradient(left,red 0%, green 100%);*/

/*background: -webkit-linear-gradient(left,red 0%, yellow 50%, green 100%);*/

/*background: -moz-linear-gradient(left,red 0%, green 100%);*/

/*background: -o-linear-gradient(left,red 0%, green 100%);*/

background: linear-gradient(left,red 0%, green 100%);

}