前端之css层叠样式表一

前端之css层叠样式表一

http.www.w3school.***.***

1.css简介:美化网页,布局(网页美容师)

2.css格式

选择器{样式}

给谁改样式{改什么样式} 

<style>

p {   标签名称

中间用冒号;一定要加分号表述结尾

            color: green;

            /* 修改颜色 */

            font-size: 20px;    

            /* 修改了文字大小为20像素 */

        }

</style>

//规范:冒号后面、选择器和大括号之前加一个空格

3.css选择器

作用:选择要改的标签

一.基础选择器

1.标签选择器

<style>

标签名 {

属性 :属性值;

}

</style>

2.类选择器

.类名{//类名:自定义

属性 :属性值;

}第一步

第二步:在需要该的标签中写 class="类名"

类选择器口诀:样式点定义 结构类(class)调用 一个或多个 开发最常用

<div>就是一个装网页的盒子

2.2.类选择器----多类名

<div class="red font">刘德华</div>

要求:属性之间有空格

应用:可以把相同的属性放在一个类中,可以统一修改

3.id选择器

#id名{

属性 :属性值;

}

id选择器的口诀:样式#定义,结构id调用,只能调用一次,别人不能使用

类选择器和id选择器差不多,一个是点和class,一个是#和id

4.通配符选择器

它一次选择页面的所有标签

* {

属性 : 属性值;

}

2.css字体属性

1.字体系列

如:宋体,正楷,小隶

标签名{

font-family: 字体名;

}

同时写多个字体,防止你的电脑上步配备该字体,提供选择,各字体用英文的逗号隔开

2.字体大小

标签名{

font-size: 值px;

}

页面默认为16px

标题标签比较特殊,需要单独指定文字大小

可以直接用<boby>标签设置字体格式

3.字体粗细

标签名{

font-weight : 值;

normal默认值、bold加粗(strong)、

}

700的后面不要加其他,等同于bold ;同理 normal=400;注意数字后不跟单位

4.文字样式

normal默认值;italic表示斜体

标签名{

font-style :normal/italic;

normal默认值、italic斜体(<em>倾斜标签)

}

//经常给斜体标签<em>、<i>不倾斜

5.复合属性

   font: font-style  font-weight font-size/line-height font-family;            

            font: italic 700 16px 'Microsoft yahei' ;

所有font属性,顺序不能改变,各个属性间用空格隔开

不用的属性可以省略(取默认值),但必须保留font-size,font-family属性

3.css文本属性

1.文本颜色

2.对齐文本

text-align属性设置元素内文本内容的水平对齐方式

div{

text-align:center/left/right

}默认的是左对齐

3.装饰文本

text-decoration:添加下划线、删除线、上划线

div{

text-decoration:underline;

}none默认无、underline下划线、overline上划线、line-through删除线

a{

            text-decoration: none;

        /* 取消链接的下划线 */

        }

4.文本缩进

text-indent属性每段落首行缩进

div {
text-indent :像素值//2em;

}//em是一个相对单位。代表1个文字的大小

5.行间距

text-height

div {
text-lenght :像素值;

}

行间距=字体的像素+上间距+下间距

4.css引入方式

一、嵌入方式

1.内部样式表

在html页面中,将所有的css全抽出放在<style>中

2.行内样式表

<p style="color: aqua;">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>

可以控制当前的标签,只适用简单的样式修改

3.外部样式表

第一步:单独建一个css文件,在css文件中写各种属性

第二步:在html页面中,使用<link>标签引用这个文件

<link rel="stylesheet" href="style.css">

5.Chrome调试工具

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端之css层叠样式表一

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买