【原创】CSS基础教程-三种添加方法+实战

蚁安永恒
11903蚁安永恒菜鸟高手
2018-03-06 13:53:41
11903 2018-03-06 13:53:41
nbsp;   首先CSS有三个添加方法
    拿color:green;来说,这一条样式表示的是设置色彩为:green(绿色)
    我们用p标签来,也就是设置字体颜色
-------------------------------------------
1.在p标签中增加style:"color:green"这一句代码
     <p style="color:green">
     我们来实践一下,看看能不能达到我们想要的效果
5

描述:5


效果如下:
4

描述:4


很显然,第一种方法就是在标签中添加  style=""  在“”中写CSS样式
介绍几种常用的CSS属性:
text-align:center;  居中
color:颜色;  设置颜色
font-family:微软雅黑; 定义常用字体
background:black;定义背景颜色(如要用图片为背景应把文中的black更改为url(‘路径’))
 
--------------------------------------------
2.在<head></head>中插一段代码
注意:大多数样式后都以;结尾
 
3

描述:3


 <head>
  <meta charset="utf-8"
/>
  <title></title>
    <style
type="text/css">
     p{
      color: green;
       }
    
</style>
        
 </head>

效果:
4

描述:4


 
总结:第二种方法是在head头部中添加<style>中写样式
---------------------------------------------
3.在HTML文件同文件夹中或同目录其他文件夹中新建.css文件
在这个文件中写
p{color:green;}
在HTML文档<head></head>中写
<link rel="stylesheet" href="路径"
>(我是放在了css文件夹,文件名style.css)
2

描述:2


style.css:
1

描述:1



效果:
4

描述:4






总结:第一种方法就是在标签内写CSS样式
第二种就是在<head></head>中写
第三种就是关联CSS样式


注意:一些标签不支持在标签内写
为了让网页源码更简洁我们一般使用第三种,少量使用第一种。
----------------------------------------------
接下来实战一下模仿某个新闻网页。
模仿一下这条新闻:https://baijiahao.baidu.com/s?id=1581751744962942676&wfr=spider&for=pc



首先把这一篇文章复制下来:

先写标题
这里我使用上面介绍的第三种方法


回上去看标题,他使用的字体应该是微软雅黑,我们来设置字体。
再设置字号为24px
来到style.css文件里
写上:
h1{font-family":微软雅黑";}

保存运行一下,这里由于是网页,我直接把效果用表现出来
终于明白为何赵丽颖两次“抢”走baby代言,原来背后有他!
标题好了,我们来写作者这一块,头像由于部分原因先省略


先要设置萌神木木这行字为蓝色,百家号和日期为灰色



在style.css文件中写
h4{color:blue;}
h5{color:gray}


看看效果:

下面再在CSS文件中写
p{font-family:微软雅黑;font-size:30px;}
这样下来整个网页就差最后一步了
大家看下,是不是文章都在左边那一块
这里就要用到div框架了

用div框架包括整篇文章
在CSS文件里写
div{border: 3px black double;width: 600px;}
这句话的意思大家应该都知道
设置这一篇文章在网页里宽度占600像素
有边框是因为看的更清楚
成品:



本期教程就到这里,还是不会的可以加我QQ
本文标题:【原创】CSS基础教程-三种添加方法+实战
本文作者:蚁安永恒
本文来自:蚁安黑客官网
转载请注明本文链接:http://bbs.mayidui.net/t1780-1.html
蚁安永恒
沙发蚁安永恒菜鸟高手 2018-03-06 13:55

----    ----
    -----
raoday
板凳raoday安全工作者 2018-03-06 14:08
不错哦,继续加油,蚁安成员
5555599999
地板5555599999网络安全主管 2018-03-07 10:40
感谢分享
游客
登录后才可以回帖,登录 或者 注册
weixin
蚁安蚂蚁堆

找工具、找教程、找朋友,你想不到的这儿都有!

微信号:baiyiwangan