css鼠标悬停样式_CSS——学习笔记

最新推荐文章于 2024-08-12 12:23:28 发布

weixin_39756540

最新推荐文章于 2024-08-12 12:23:28 发布

阅读量829

点赞数

文章标签： css鼠标悬停样式

一、CSS简介

1、什么是CSS？

级联样式表单

2、作用

针对页面及文本的外观样式进行控制
- 例如：字体大小、颜色....
文本与样式相分离

二、CSS是如何定义

1、内联样式

简介
将css的属性配置直接写到标签里面

举例

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>head><body><p style="color: red;font-weight: bold">    今天是学生第一天上学p>body>html>

特点
- 内联样式直接作用于标签，因此此样式只能应用于此标签，没有作用于此样式的标签不起作用

2、内嵌样式写法

直接在head标签定义一个style

举例

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style type="text/css">        p {            color: red;            font-weight: bold;        }    style>head><body><p>    今天是学生第一天上学p><p>    今天是9月1号p>body>html>

特点
- 根据选择器来应用样式

3、外联样式写法

简介
将css语法定义独立成一个css文件，然后应用页面通过link文件进来

举例

body {    background-color: aqua;}p {    font-family: Arial;    font-weight: bold;    color: coral;}

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <link rel="stylesheet" href="css/mycss.css" type="text/css"/>head><body><p>    今天是学生第一天上学p><p>    今天是9月1号p>body>html>

编写html
编写mycss.css

4、优先级问题

针对同一个样式属性，优先级

内联样式》内嵌样式写法》外联样式写法

举例

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <link type="text/css" href="css/mycss.css" rel="stylesheet">    <style type="text/css">        p {            color: aqua;        }        body {            background-color: blanchedalmond;        }    style>head><body><p style="color: red">    今天是学生第一天上学p>body>html>

三、CSS的基础语法

1、基础语法

选择器 {        属性名1:属性值1;    属性名2:属性值2;    属性名3:属性值3}

举例

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style type="text/css">        p {            color: red;            text-align: center;            font-weight: bold;        }    style>head><body><p>    今天是学生第一天上学p>body>html>

2、选择器

a、选择器分类

类选择符
id选择符
关联选择符
通用选择器

b、类选择符

如何定义类选择符

.类名 {    属性名1：属性值1;    属性名2：属性值2}

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style type="text/css">        .t1 {            font-weight: bold;            color: blue;        }    style>head><body><p class="t1">    今天是学生第一天上学p><div class="t1">    div标签的显示内容div>body>html>

举例

c、ID选择器

如何定义ID选择器

语法

#ID值 {    属性名1:属性值1;    属性名2:属性值2    ....}

举例

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style type="text/css">        #pId01 {            color: aqua;            font-weight: bold;        }        #pId02 {            color:red;            font-weight: bold;        }    style>head><body><p id="pId01">    今天是学生第一天上学p><p id="pId02">    今天是9月1号p>body>html>

d、通用选择器

简介

主要是针对标签定义

基础语法

标签名 {    属性名1:属性值1;    属性名2:属性值2;    属性名3:属性值3}

举例1

直接使用通配符(*)，所有在此页面的标签都应用样式

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style type="text/css" >        * {            color: red;            font-weight: bold;        }    style>head><body><p>    今天是学生第一天上学p><div>    div里面的显示内容div>我们现在学习java<br/>我们现在学习pythonbody>html>

举例2

组合使用标签

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style type="text/css" >        p,div {            color: red;            font-weight: bold;        }    style>head><body><p>    今天是学生第一天上学p><div>    div里面的显示内容div>我们现在学习java<br/>我们现在学习pythonbody>html>

e、关联选择符

简介

后代节点

只要是父节点的子节点(包括子节点的子节点)，都是属于后代节点

举例

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style type="text/css">        div span{            color: red;        }    style>head><body><div>    第一个div    <span>        第一个span        <span>            第二个span            <span>                第三个span            span>        span>    span>    <span>        第四个span    span>    <p>        第一个p标签    p>div>body>html>

直系后代节点

语法
A>E
它只认A节点下的直系子节点E，不认E子节下的子节点(不认孙子节点)

举例

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style>        span {            background-color: white;        }        div > span {            background-color: DodgerBlue;        }    style>head><body><div>    <span>第一个span    <span>            第二个span        span>    span>    <span>第三个span        <span>第五个spanspan>    span>    <span>第四个spanspan>div>body>html>

兄弟节点

语法
A+E
A标签的下一个兄弟属于E节点折应用于此样式

举例

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style type="text/css">        /*        li的下一个兄弟标签是li的应用此样式        */        li+li {            color: red;            font-weight: bold;        }    style>head><body><ul>    <li>perlli>    <span>gospan>    <li>cli>    <li>javali>    <li>pythonli>    <li>c++li>    <li>Androidli>ul>body>html>

f、选择器的优先级

id选择器优先级最高>类选择器>通用选择器

举例

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style type="text/css">        #pId {            color: green;        }        .pCls {            color: blue;        }        p {            color: red;        }    style>head><body><p id="pId" class="pCls">    今天是上学的第一天p>body>html>

四、伪类

1、基础语法

标签名:伪类 {属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;....}

2、a标签为例

举例一

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style type="text/css">        /*        已访问的链接        */        a:visited {            color: blue;            text-decoration: none;        }        /*        当有鼠标悬停在链接上        */        a:hover {            color: red;            text-decoration: none;        }        /*        未访问的链接        */        a:link {            color: green;            text-decoration: none;        }        /*        被选择的链接        */        a:active {            color: aquamarine;            text-decoration: none;        }    style>head><body><a href="http://www.163.com">超链接a>body>html>

3、其它的伪类使用

举例

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style type="text/css">        p:first-letter {            color: red;            font-weight: bold;        }        p:before {            content: "<;            color: aqua;        }        p:after {            content: ">>";            color: green;        }        div:first-line {            color: blueviolet;        }    style>head><body><p>    java hello worldp><div>    aaaaaaaaaaaaaaaaaaa<br/>    bbbbbbbbbbbbbbbbbbb<br/>    ccccccccccccccccccc<br/>div>body>html>

五、常用的CSS属性

文本

color:设置文本颜色
text-align:对齐元素中的文本
text-decoration：向文本添加修饰
text-indent：缩进元素中文本的首行
vertical-align：设置元素的垂直对齐

举例

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style type="text/css">        p {            color: red;            text-decoration:overline;            text-indent: 200px;            width: 400px;            height: 400px;            background-color: aquamarine;        }    style>head><body><p>    今天是同学上课的第一天p>body>html>

字体

举例

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style type="text/css">        #p1 {            font-family: 方正姚体;            font-size: larger;        }        #p2 {            font-family: 楷体;            font-size: large;            font-style: oblique;            font-weight: bolder;        }        #p3 {            font-family: 黑体;            font-size: small;            font-style: italic;            font-weight: bold;        }    style>head><body><p id="p1">方正姚体p><p id="p2">楷体p><p id="p3">黑体p>body>html>

列表

举例

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style type="text/css">        ul {            list-style-type: square;        }    style>head><body><ul id="u1">    <li>苹果li>    <li>西瓜li>    <li>香蕉li>ul><ul id="u2">    <li>苹果li>    <li>西瓜li>    <li>香蕉li>ul><ul id="u3">    <li>苹果li>    <li>西瓜li>    <li>香蕉li>ul>body>html>

表格

举例

<html lang="en"><head>    <meta charset="UTF-8">    <title>Titletitle>    <style type="text/css">        table,tr,td {            border: 1px solid lightslategray;            border-collapse: collapse;        }        table {            width: 80%;        }        td {            text-align: center;            padding: 10px;        }        table span {            font-weight: bold;            font-family: 黑体;            color: red;        }        .tr01 {            background-color: blanchedalmond;        }        .tr02 {            background-color: white;        }        tr:hover {            background-color: aqua;        }    style>head><body><table>    <tr>        <td>            <span>商品idspan>        td>        <td>            <span>商品名span>        td>        <td>            <span>价格span>        td>    tr>    <tr class="tr01">        <td>sn001td>        <td>苹果电脑td>        <td>10000.00td>    tr>    <tr class="tr02">        <td>sn002td>        <td>苹果手机td>        <td>8000.00td>    tr>    <tr class="tr01">        <td>sn003td>        <td>苹果耳机td>        <td>600.00td>    tr>table>body>html>