zoukankan      html  css  js  c++  java
  • HTML学习-CSS

    1、css语法

       (1) 可以将css样式编写到head中的style标签里,将样式表编写的style标签中,然后通过css选择器选中指定元素

        <style   type="text/css">

        p{

                 color:red;

                 font-size:40px;

            }

      (2)还可以将样式表编写到外部的css文件中,然后通过link标签来将外部的css文件引入当前的页面中。

              <link rel="stylesheet"  type="text/css"  href="style.css">    前两个不改,只改后一个(为   设置内容的位置)

    2、块元素和内联

      (1)块元素<div>标签(独占一行元素,主要对页面进行布局的)

                p、h1、h2、h3.....也是块元素

      (2)span是一个内联元素(只占自身大小,不会独占一行,专门用来选中文字,设置样式)

                a、img、igrame、span

    3、常用选择器

        (1)元素选择器(可以选择页面中所有指定元素)语法:标签名{  }

        (2)id许选择器(通过id属性值选中唯一的元素)  语法:#id属性值{  }

            class属性类似id属性,但是class属性可以重复(通过元素class属性值选中一组元素)    语法:  .class属性值{}

           同时为一个元素设置多个class属性,多个值之间使用空格隔开

          (3)选择器分组(可以同时选中多个选择其对应的元素)语法:选择器1,选择器2,选择器n{   }

         (4)通配选择器(选择页面中所有的元素)语法:*{}

        p {
             color:blue;
            font-size:40px;
              }
          #p1{
             color:green;
            }
          .p2{
             color:red;
            }
           .p3{
             font-size:50px;
            }
      
          <p>这是css学习</p>
          <p id="p1">这是css学习</p>
          <p class="p2">这是css学习</p>
          <p  class="p2 p3">这是css学习</p>

    4、伪类选择器(专门表示元素的一种特殊状态,例如访问过的超链接、普通链接、获取焦点的文本框)

        正常链接:a:link        访问过的链接: a:visited(只能定义字体颜色) 

       鼠标划过的链接:a:hover        正在点击的链接:a:active

        a:link{  color:yellow;}

        <a href="#">正常链接</a>

        

        a:visited{  color:red;}

        <a href="#">访问过的链接</a>

     (1) input(创建文本框文本框)   focus(文本框获取焦点)

      input:focus  {  background:yellow;    }

    <input type="text"/>

    (2)selection(为p标签中选中的内容使用样式)

       p::selection{   background-color:yellow;}

    (3)伪元素

           first-letter(为标签中第一个元素设置特殊样式)

           first-line(为标签中第一行设置特殊样式)

            before(表示元素最前边的部分,一般都需要结合content这个样式一起使用,通过content可以向befor或after的位置添加一些内容)

           after(表示元素最后边的部分)

    例如:为p标签中第一个字符设置一个特殊样式

            p:first-letter{  color:red;    }

           <p>我是一个段落</p>

    5、属性选择器(可以根据元素的属性或属性值来选取指定元素)语法:

               [属性名]选取含有指定属性的元素    例如:p[title=hello]{   color=red;  }

                [属性名=“属性值”]选取含有指定属性值的元素

                [属性名^=“属性值”]选取属性值以指定内容开头的元素

                [属性名$=“属性值”]选取属性值以指定内容j结尾的元素

                [属性名*=“属性值”]选取属性值包含指定值的内容的元素

         title属性(可以给任何标签指定,当鼠标移入到元素上时,title属性值会作为提示文字显示)   语法:<p title="hello">我是一个段落</p>

    6、子元素的伪类

       :first-child 可以选择中第一个子元素   语法:   p:first-child{    }

        :last-child  可以选择最后一个子元素

       :nth-child 可以选择任意一个子元素      语法:  p:nth-child(1、3、...n、odd、even){   }    odd表示奇数的子元素,even表示偶数的子元素

        :first-of-type   :last-of-type这些与 :first-child类似,只是child是在所有的子元素中排列而type在当前类型的子元素中排列

    7、否定伪类(可以从已选中的元素中剔出某些元素)语法::not(选择器)

          p:not(.hello){    }

        <p>我是一个p标签</p>

         <p class=”hello“>我是一个p标签</p>

          <p>我是一个p标签</p>

          <p>我是一个p标签</p>

  • 相关阅读:
    Oracle的hash分区
    Oracle的list分区
    range联合分区
    Oracle分区表range单分区
    彻底解决Oracle unable to create INITIAL extent for segment in tablespace xx
    Oracle表空间管理,数据迁移,
    plsqldevelop安装教程
    count(*)与count列谁快谁慢
    阿里云服务器Centos6.9安装oracle11g单实例数据库
    字符转换二进制码
  • 原文地址:https://www.cnblogs.com/dixingchen/p/12264165.html
Copyright © 2011-2022 走看看