CSS选择器

原创
2018/06/04 18:00
阅读数 251

<!DOCTYPE>声明标签:
定义和用法:

声明必须是HTML文档的第一行,位于<html>标签之前。

其声明不是HTML标签,它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。

在HTML4.01中,<!DOCTYPE>声明引用DTD,因为HTML4.01基于SGML.DTD规定了标记语言的规则,这样浏览器才能正确的呈现内容。

HTML5不基于SGML,所以不需要引用DTD。

HTML5:<!DOCTYPE html> <meta charset=’utf-8’>
HTML4:
     <!DOCTYPE HTML PUBLIC ”-//w3c//DTD HTML 4.01Transitional//EN”http://www.w3.org/TR/html4/loose.dtd>
     该DTD包含所有HTML元素和属性,包括展示性的和弃用的元素比如(font),不允许框架集(Framesets).
     <meta http-equiv=Content-Type content=”text/html;charset=utf-8”>
     注意规则:
          单标记必须闭合如:<br>必须为<br/> <input/>
          单属性必须添加属性值:<input type=’radio’ checked>必须写为<input type=’radio’ checked=‘checked’/>
          标记和属性必须使用小写:<Body><BODY/> 必须写为<body>
          属性的属性值必须使用:在HTML4.01z之前可以使用<body bgcolor=red>,HTML4.01必须写为<body bgcolor=”red”>

使用CSS样式的方式定义:
内联式样式:在单个元素里面写CSS:<body style=”background-color:red;”>

嵌入式样式表里面写CSS:<style type=”text/css”>
   Body{ 
            background-color:red;
        }
                         </style>
例子:
   <!DOCTYPE html>
    <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>CSS初体验</title>
         <link rel="stylesheet" type="text/css" href="FirstStyleCss.css"/>
           <!--<style type="text/css">
           body{
                background-color: green;
               }
           </style>-->
      </head >
     <body style="background-color:red">
          <h1 style="background-color:white">  这个字是什么色呢?</h1>
     </body>
   </html>

引入式样式表引用CSS文件:
      <link rel="stylesheet" type="text/css" href="style.css"/>
        href里面文件在单独的一个样式表里面。
   HTML标记定义(CSS选择器):
        <p></P>对该元素定义:p{属性:属性值;}
   Class定义:
         <p class=”pp”“></P>对该元素定义:.pp{属性:属性值;}
   ID定义: <p id=”pp”“></P>对该元素定义:#pp{属性:属性值;} id选择器是一个唯一选择器。
 
优先级:ID>Class>HTML。同级时选择离元素最近的一个。
组合选择器(同时控制多个元素)h1,h2,h3,.div{font-size:14px;color:red;}
伪元素选择器:
      a:link:正常连接的样式;
      a:hover:鼠标放上去的样式;
      a:active:选择链接时的样式
      a:visited:已经访问过的连接的样式;
例子:
      a:link:{color:red;}
      a:hover:{color:green;}
      a:active:{color:red;}
      a:visited:{color:green;}
CSS叠加样式:
 

展开阅读全文
打赏
3
0 收藏
分享
加载中
QAQ123345博主
了解下啦
2018/06/06 17:44
回复
举报
这是打算入前端的么?
2018/06/06 17:15
回复
举报

引用来自“小兰兰大雕萌妹”的评论

了解呢

回复@小兰兰大雕萌妹 : 健身IT男,挺喜欢小姐姐的 加个微信呗
2018/06/06 14:32
回复
举报
QAQ123345博主
了解呢
2018/06/05 16:55
回复
举报
小姐姐这是在学习前端吗、?
2018/06/05 16:55
回复
举报
更多评论
打赏
5 评论
0 收藏
3
分享
返回顶部
顶部