今天是学习的第二天,看了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进行处理之后类似这样: