• CSS 笔记1 css选择器


    CSS全称是Cascading Style Sheet,层叠样式表。用于控制页面样式与布局,并允许样式信息与网页内容相分离的一种标记性语言。

    引入CSS方法

    1.内联引入方法:直接在HTML标签内添加样式

    <p style="color:red;">改变字体颜色</p>

    2.内部引入方法

    在HTML 中添加style样式

      <style>

      p{

        color:red;

        font-size:20px;

         }

      </style>

    3.外部引入方法

    在HTML文档外部新建一个以.css为后缀名的CSS样式表,在HTML文档的<head>部分以<link type="text/css" rel="stylesheet" href="url">标签进行引入

    三大选择器:元素选择器、类选择器、ID选择器

    1.元素选择器是针对标签元素如:p、a、ul等标签设置的样式,直接以标签名字定义

      如:p{ color : red;}

    2.类选择器是针对不同元素需要使用相同样式时的一种样式设置方法,以 点+类名 定义

     如:.myText{ color : red;}    调用时:<p class="myText">文字</p>

    3.ID选择器是针对某个需要单独操作的标签进行的样式设置方法,ID属性值是唯一的。以 #+ID名 定义

     如:#myText{ color : red;}   调用时:<p id="myText" >文字<p>

    其他选择器:集体选择器、属性选择器、后代选择器

    1.集体选择器:当多个元素都采用同一种样式属性的时候,用集体选择器就会方便很多,元素之间用逗号隔开

      li,.mytext,span,a{ color : red; }

    2.属性选择器:可以根据元素的属性和属性值来设置样式。

      img[alt]{ border : 3px; }   所有拥有alt属性的img标签都有3个像素宽的边框

      img[alt="image"]{ border : 5px; }   对alt属性的值为image的元素重新设置了样式,设置它的边框为5个像素

    3.后代选择器:又叫包含选择器,可以用于作为某元素后代的元素。

      h1 em{ color : red; }    只对h1元素中的em元素应用样式

      div .sidebar{ color : red; }  对div中类名为 sidebar 的元素应用样式,可以好多层套下去

     4.子元素选择器:只能选择作为某元素子元素的元素。

      如:h1 > strong{ color : red; }   以下第一个子级会变颜色,第二个不会

      <h1>这是<strong>子级</strong>关系</h1>

      <h1>这是<em>子级和<strong>后代</strong></strong></em>关系<h1>

    5.相邻兄弟选择器:可选择紧接在另一元素后的元素,且二者具有相同的父元素。

      h1+p{ color : red; }   选择紧接在h1元素后出现的段落,h1和p元素拥有共同的元素

    <style>

      html>body div+span,html>body hr+ul li{ color : red; }

    </style>

      从<html>元素中找到一个叫做<body>的子元素,并且在<body>元素中找到所有后代为<div>的元素,接着从<div>元素的同级后面找到元素名为<span>的元素,第二个选择器声明解释相同。

    <style>

  • 相关阅读:
    bzoj3675 [Apio2014]序列分割
    bzoj4010 [HNOI2015]菜肴制作
    bzoj4011 [HNOI2015]落忆枫音
    bzoj100题
    JSP—内置对象
    集合框架—常用的map集合
    集合框架—HashMap
    集合框架—代码—用各种集合进行排序
    集合框架—2种排序比较器
    array
  • 原文地址:https://www.cnblogs.com/mmm-iwtb/p/9525532.html
Copyright © 2020-2023  润新知