了解了一点html后，进一步在去了解css。
css的编码个人感觉风格有点像c语言，在语句结束后都需要用一个";"（分号）进行结尾。
1.首先是几种常用的css样式
①内联式：将css代码插入到元素开始的标签；
eg：<p style="color:red">文字变红</p>
这样在<P>~</p>中的文字都会变成红色。
②嵌入式：需要先在<head>中加入<style type="text/css"进行说明>
<head>
<style type="text/css">
p(可以是某个元素的标签或者用"class"和"id"){
(填入需要修改的元素)color:red;
text-align:center;
font-family:xx;
font-sizi:xxpx;
......
}
</style>
</head>
③外部式
需要在头文件中也进行一个声明
<head>
<link rel="stylesheet" type="text/css" href="XXX(css的文件名).css" />
</head>
然后只需要在你的xxx.css文件中对html需要装饰的部分进行一个编码就可以了。
2.常修改的几个数据
①text（文本）
常用包括：align(对齐；左右对齐、居中等)、decoration（装饰；下划线、删除线（购物网站常用））
<style type="text/css">
span{
text-decoration:line-through;
}
</style>
<body>
原价:<span>998</span>;现价：98
</body>
删除线效果图
②font（字体）
常用包括：sizi(大小)、weight(粗体)、style(风格；斜体或者正常)
③color(颜色)
④position(位置）
包括：absolute（绝对位置）、relative（相对位置）、fixed（固定位置；很多时候都用固定位置，不管窗口怎么变，页面上下滑，窗口都始终固定在同一个位置上）。
3.常用选择器
①标签选择器（例如：<p>,<body>,<h1>......）
②类选择器（class与id）
两者都需要在标签内设置名称：
<span class/id="XXX">编辑内容</span>
但在声明中若用"class"则
.XXX{
color:red;
font-size:XXpx;
......
}
若用id,则将"."改成"#".
而两者不同之处是class可以为同一个元素设置不同的属性。
例如
<style type="text/css">
.color{
color:red;
}
.size{
font-weight:bold;
}
</style>
<span class="color">变红</span>
<span class="color size">变红变大</span>
对比效果图
③伪类选择器
给html中的一个标签元素的鼠标滑过的状态来设置字体与颜色。
例如：
<style type="text/css">
a:hover{
color:red;
font-size:20px;
}
</style>
<p>我还是一个<a href="http://www.baidu.com">十分帅气</a>的男孩子</p>
鼠标点击前
鼠标滑过后
4.重要性及优先级
当同一个元素对同一个属性编成不同的风格时：
①叠层：
优先考虑下一个的
例如：
p{
color:red;
}
p{
color:green;
}
此时<p>文档内容为绿色。
②重要性：
可用{！important}进行标注可优先。
p{
color:red！important;
}
p{
color:green;
}
此时<p>文档内容为红色。（"！important"要写在分号前面。）
5.边框
可以为文本或者是图片增加一些边框。
XX（需要增加的元素）{
border-color:red;/*控制颜色*/
border-style:solid;/*控制边框的风格*/
border-width:2px;/*控制边框的大小*/
}
小结：css是一个好东西，如果说html比作人，那么css就是衣服。css弄好了，页面效果应该不会太差。😊
网友评论