PHP自学第二天-----css样式之一-----第二天

今天是学习的第二天,看了css样式的一部分,视频是还是千锋上面的视频,不过由于css 样式知识点太碎了,所以看完之后又在菜鸟网站上看了一下,顺便做了上边的部分题,题很简单,有兴趣的小伙伴可以去看一下。

1.css是做什么的?

css是网页样式表,为网站布局提供帮助的。

2.css样式表的三种三种方法:

1)直接外部引入:适用于多个网页共用一个排版的情况。

格式:

<head>

<link rel="stylesheet" type="text/css" href="xxx.css">

</head>

2)内部样式表:用在与其他网页样式都不相同的情况

<head>

<style type="text/css">

</style>

</head>

3)内联表样式:用在标签中,不过这样的话使页面排版太过散乱,不利于后期的修改,所以不建议使用。

<h1 style="font-size:18px"></h1>

3.三种选择器

选择器的作用:用来标记要设置的标签

选择器的书写方式:标签名{属性名1:属性值1; 属性名2:属性值2;}

1)标签选择器:具有共性,要设置对相应的标签全部设置

<style type="text/css">

h1{font-size:16px;color:blue;}

</style>

2)id选择器:名字不能重复

<style type="text/css">

#name{font-size:16px;color:blue;}

</style>

在body中设置为:

<body>

<h1 id="name>收到</h1>

</body>

3)class 选择器:用于设置特定的一类,名字可以重复

<style type="text/css">

.name{font-size:16px;color:blue;}

</style>

在body中设置为:

<body>

<h1 class="name>收到</h1>

</body>

4.尺寸

在css中设置字体、图片等的大小时有几种方法:

1)按照比例设置:

font-size:100%<!--相当于16px-->

2)em设置,可以在一个段落的第一行使用,达到缩进的效果

font-size:1em;<!--1em=16px-->

3)px 像素

font-size:16px;

5.背景设置

background属性:

background-color:red;//设置背景为红色

background-image:url('logo.jpg');//设置背景图片为logo

background-repeat:no-repeat;//图片是否重复拼接,默认为true

background-positon:center top;//设置图片位置,先左右,后上下(在这里是左右居中,上下向上)

重点:一般进行综合设置:background: red url('logo.jpg') no-repeat center top;

6.四种链接的效果:

a:link//没点击时

a:visited//点击过之后的效果

a:hover//鼠标放在链接时的效果

a:active//鼠标点击时的效果

在这四种中可以进行字体类型(text-decoration)、背景颜色(background-color)、字体颜色(color)的设置

7.css中对字体的修饰总结:

大小:font-size

字型:text-decoration

字体:font-family("黑体","宋体");

颜色:color

8.列表的处理:

取消ul 中的小点点:ul{(list-style:none;}

9.表格处理:

设置边框:

boder:red solid 1px;

折叠边框:内框

table{border-collapse:callapse;}

处理之前:

对table进行处理之后类似这样:

猜你喜欢

转载自blog.csdn.net/sinat_35161044/article/details/81511697