hq金水

愿你是阳光,明媚不忧伤~
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

CSS样式表、链接(lvha)样式设置

Posted on 2016-05-05 12:05  hq金水  阅读(2500)  评论(0编辑  收藏  举报

     在写正文之前,先鸡汤一下我久旱的心灵。前几日,前位突然问我,你为什么来学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;
  width: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>