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>

posted on 2020-02-05 15:59  帝星辰  阅读(154)  评论(0编辑  收藏  举报

导航