在写正文之前,先鸡汤一下我久旱的心灵。前几日,前位突然问我,你为什么来学IT?没想到,这个很简单的答案,此刻我竟然懵逼了。此刻,我头脑里闪过百种光线,为了生存、梦想、个人发展、金钱、美女、养家糊口、飞黄腾达……在这个万恶的社会,我也是精神上邪恶了一把,好不爽的说。最后我回答:“稀里糊涂的来了。。”是么?是的,前半生过得也是不清不楚,稀里糊涂的,从没想过走程序员的路,就这么风风火火的来了。我接着问他,你呢?家培兄用很和蔼的笑容告诉我说:“怎么能说稀里糊涂呢,我当然是因为喜欢了。“
哐当,犹如一道闪电扑向我眼睛,喜欢。多么好的字眼,多么清澈的回答。为什么我不敢面对自己的心呢,我来学习,是一种缘分。既来之,那么我要学的是一种独立分析问题解决问题的能力,此为逻辑。
~扯远了,进入正题------------
样式表-------优化网页,控制html的样式。
有三类:
1、内联样式表
写在body中,<p stytle="font-size;16px"></p>
2、内嵌样式表
写在head里,作为一独立区域控制作用
<style type="text/css">
p //格式对所有p标签起作用
{
样式;
}
</style>
3、外部样式表
新建一个CSS文件,在html文件中调用它
HTML文件中点右键→CSS样式表→附加样式表
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
调用方法借用选择器。
选择器---用于内嵌样式表和外部样式表
* /*针对所有标签起作用,去除所有边距和间距*/
{
margin:0px;
padding:0px;}
------------------------------一般写样式表代码的时候都先写这句代码,去除默认边距和避免浏览器不识别
1.标签选择器。用标签名做选择器。
<style type="text/css">
p/*针对于所有的p标签起作用*/
{
background-color:#C3C;
font-size:24px;}
</style>
2.class选择器。都是以“.”开头。
.main/*以.开头,需要使用class引用*/
{
background-color:#FF3;
font-size:36px;}
调用class样式,一个页面可调用多次
<div class="main">我有一个家</div>
<div class="main">一个不需要</div>
<div class="main">多大的地方</div>
3.id选择器。以“#”开头。
#qq
{
margin-top:300px;
background-image:url(n0.jpg);
background-size:cover;
color:#F00;
font-size:36px;
height:300px;
600px;}
id的调用,<div id="qq">啦啦啦</id>,一个页面只可调用一次
4.复合选择器
(1)用“,”隔开,表示并列。
p,span /*p和span有相同的样式*/
{
background-color:#C03
}
(2)用空格隔开,表示后代。
css: .main
{
background-color:#FF3;
font-size:36px;}
.main p
{
color:#0F0;}----------在html中找到使用样式main的标签,再在该标签中找到P标签。
html: <span class="main">123<p>4567</p>89</span>
(3)筛选“.”
p.pp--------在标签P中的class="pp"标签,执行下列样式
{
background-color:#0F6;
font-size:36px;}
<p class="pp">4567</p>
链接的style:
a:link 超链接被点前状态
a:visited 超链接点击后状态
a:hover 悬停在超链接时
a:active 点击超链接时
在定义这些状态时,有一个顺序l v h a
实例(使用外部样式表)
CSS文件:
a:link
{
text-decoration:none;
color:#000;}
a:visited
{
text-decoration:none;
color:#000;}
a:hover
{
text-decoration:underline;
color:red;}
a:active
{
text-decoration:underline;
color:#FC0;}
html文件:
<head>
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="http://www.baidu.com" target="_blank" style="b">百度一下</a>
</body>