zoukankan      html  css  js  c++  java
  • CSS-选择器

    CSS3================================
    1.概述
    1.什么是CSS?
    CSS:Cascading Style Sheets 层叠样式表,级联样式表,简称:样式表。
    2.作用
    设置HTML元素的样式
    3.CSS与HTML之间的关系
    HTML:构建网页的结构内容
    CSS:构建网页的样式效果
    4.HTML属性与CSS属性的使用原则
    w3c尽量使用CSS属性去取代HTML的属性来修饰元素。
    2.CSS语法规范
    1.使用CSS样式表的方式
    1.内联样式
    又称为“行内样式”
    特点:将CSS样式定义在HTML开始标记中
    语法:
    <ANY style="CSS的样式声明"></ANY>
    样式声明:
    1.由样式属性和值组成;
    2.属性名与值之间用冒号连接;
    3.多个样式声明之间用分号分隔。
    常用的样式属性和值:
    1.设置文本颜色的属性和值
    属性:color
    值:合法的颜色值(颜色英文单词red)
    2.设置背景颜色的属性和值
    属性:background
    值:合法的颜色值
    3.设置字体大小的属性和值
    属性:font-size
    值:数字+px(像素)
    练习:
    1.在网页中新建一对p元素,内容随意;
    2.设置p元素中文本颜色为紫色(purple),背景颜色为橙色orange),字体大小为34px。

    2.内部样式
    在网页的头元素中增加一对<style></style>标记,在<style>标记中声明该网页要用到的所有样式。
    语法:
    <head>
    <style>
    样式规则
    </style>
    </head>
    样式规则:由选择器和样式声明组成
    选择器:规范了页面中哪些元素能够使用声明好的样式。其实就是把声明好的样式匹配给页面中的元素。
    元素选择器:由元素名称作为选择器
    样式规则:
    选择器{样式声明}
    ex:
    div{
    color:red;
    }
    练习:
    在网页中添加若干3级标题元素,内容随意
    用内部样式设置3级标题元素中文本颜色为黄色,背景颜色为红色。

    3.外部样式
    独立于任何网页的位置处,声明一个样式文件(以.css为后缀),在css文件保存样式规则。
    使用步骤:
    1.创建独立的.css文件
    2.在css文件中保存样式规则
    3.在网页中引入css文件
    <head>
    <link rel="stylesheet" href="css文件的url">
    </head>
    练习:
    在网页中添加一对span元素,内容随意,使用外部样式为span元素设置文本颜色为绿色,背景颜色为灰色,字体大小为40px;
    2.CSS的样式特征
    1.继承性
    必须是父子关系结构
    大部分的样式可以直接继承给子元素(子继承父)

    2.层叠性
    可以为一个元素设置多个样式规则,规则中的属性不冲突时,可以同时都应用到元素上的。

    3.优先级
    如果样式声明冲突时,则按照默认的优先级来应用样式。
    默认优先级由低到高:
    浏览器的默认设置 低
    外部样式表和内部样式表 中(就近原则)
    内联样式 高
    练习:
    在页面中用内部样式为div元素设置文本颜色为红色,字体大小为35px,用外部样式设置文本颜色为蓝色,引入外部样式后查看页面字体显示效果,然后交换外部和内部样式的位置,再查看页面效果。

    4.调整显示优先级
    调整显示的优先级
    使用!important规则改变优先级
    将!important放在属性值之后,与值之间用空格隔开。
    ex:
    color:red !important;
    3.CSS基础选择器
    1.通用选择器
    语法:*{样式声明}
    作用:可以匹配页面中的任意元素。
    注意:效率较低,尽量少用
    2.元素选择器
    语法:元素名称{样式声明}
    作用:设置页面上某种(类)元素的默认样式
    ex:
    div{},p{},a{},header{},span{}...
    3.类选择器
    作用:定义某个或某些元素的样式(谁想用谁就可以引用)
    特点:通过元素的class属性进行引用
    语法:
    1.声明类选择器
    .类名称{样式声明}
    注意:
    1.类名不能以数字开头
    2.不能包含特殊字符(除_,-外)
    3.点 不能省略
    2.引用
    <ANY class="类名称"></ANY>
    特殊用法:
    1.多类选择器
    让元素引用多个类选择器
    语法:<ANY class="类名1 类名2 类名3 ..."></ANY>
    2.分类选择器
    将元素选择器和类选择器联合使用
    语法:元素名称.类名{样式声明}
    ex:
    p.test{color:red;}
    练习:
    在页面中创建div和p元素,内容随意
    1.用类选择器设置所有元素字体颜色为红色
    2.用分类选择为p元素设置背景颜色为黑色
    4.id选择器(私人订制)
    作用:设置指定id元素的样式
    语法:#id值{声明样式}
    ex:<div id="map"></div>
    #map{color:red;}
    练习:
    1.新建一个div元素,设置id为main
    2.通过id选择器设置文本颜色为黄色,字体大小为32px,斜体(font-style:italic;)
    5.群组选择器
    作用:将多个选择器放在一起进行样式的声明定义
    语法:选择器1,选择器2,选择器3{样式声明}
    ex:
    div,p,a.text,#one,span{color:gray;}
    div{color:gray;}
    p{color:gray;}
    a.text{color:gray;}
    #one{color:gray;}
    span{color:gray;}
    6.后代选择器
    作用:通过元素的后代关系匹配元素
    后代:一级或者多余一级的嵌套
    语法:选择器1 选择器2 选择器3{样式声明}
    7.子代选择器
    作用:通过元素的子代关系匹配元素
    语法:选择器1>选择器2{样式声明}
    8.伪类选择器
    作用:匹配元素不同状态的选择器
    语法:所有的伪类选择器都是以:作为开始
    选择器:伪类选择器{样式声明}
    1.链接伪类
    :link 匹配元素尚未访问时的状态
    :visited 匹配元素访问后的状态
    2.动态伪类
    :hover 匹配鼠标悬停在元素上时的状态
    :active 匹配元素被激活时的状态
    :focus 匹配元素获取焦点时的状态

  • 相关阅读:
    Java实现 蓝桥杯VIP 算法提高 交换Easy
    Java实现 蓝桥杯VIP 算法提高 多项式输出
    Java实现 蓝桥杯VIP 算法提高 多项式输出
    Java实现 蓝桥杯VIP 算法提高 多项式输出
    Java实现 蓝桥杯VIP 算法提高 多项式输出
    Java实现 蓝桥杯VIP 算法提高 多项式输出
    Java实现 蓝桥杯VIP 算法训练 矩阵乘方
    QT中给各控件增加背景图片(可缩放可旋转)的几种方法
    回调函数实现类似QT中信号机制
    std::string的Copy-on-Write:不如想象中美好(VC不使用这种方式,而使用对小字符串更友好的SSO实现)
  • 原文地址:https://www.cnblogs.com/QiliPING9/p/9027712.html
Copyright © 2011-2022 走看看