CSS层叠样式表

本文介绍了CSS的基础知识,包括如何使用CSS修改HTML元素的样式,如字体大小、颜色和边框等。接着讲解了标签选择器、类选择器和ID选择器的使用方法,以及如何通过它们来定位和定制不同类型的HTML元素。此外,还提到了选择器的一些属性,如尺寸、字体和文本属性,并展示了如何应用这些属性来改变文本的样式。文章最后通过实例演示了如何使用CSS改变链接在不同状态下的样式。
摘要由CSDN通过智能技术生成

一、css简介

  • CSS:层叠样式表
  • 通过使用CSS可以实现对html标签的属性进行控制
  • CSS作用例如:修改字体大小、修改字体颜色、修改未知

css的作用

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title> </title>
                <style type="text/css">
                        目标标签{
                                属性:值;
                                属性:值;
                                ...
                       }
                        目标标签{
                                属性:值;
                                属性:值;
                                ...
                        }
                </style>
        </head>
        <body>
                        <h1>
                                haha
                        </h1>
                         <p>
                                123456
                        </p>
        </body>
</html>

案例:要求如下 1)将h1标签中的文字修改为红色 2)给p标签加上一个边框,字体编为蓝色,设置背景色为绿色

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            h1{
                color: red;
                }
            p{
                color:blue;
                border: 1px red solid;
                background-color: yellowgreen;
                }
            span{
                    color: white;
                    font-size: 65px;
                }
        </style>
        </head>
    <body>
        <h1>这是测试css的页面</h1>
        <h1>今天是第五次课</h1>
        <p>本届奥运会上的第六枚金牌。挪威选手蒙斯·勒伊斯韦兰以171.75分获得<span>银牌</span>,加
        拿大选手马克斯·帕罗特以170.25分获得铜牌。 最近两个赛季,苏翊鸣发挥出色,不断带来惊喜。 2天前,
        他成为中国首位单板滑雪大跳台世界杯冠军;8天前,他在<span>单板滑雪</span>男子坡面障碍技巧赛中收
        获一枚银牌。 </p>
    </body>
</html>


二、标签选择器

  • 通过使用标签选择器可以定位到目标标签

1 基本选择器

* 就是基本选择器符号

  • 有的浏览器是不支持星号的,所以尽量少用

案例:页面中的所有的文字大小都是25px,颜色都是黑色,字体样式用微软雅

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            *{
                color: black;
                font-size: 25px;
                font-family: 微软雅黑;

                }
            h1{
                font-size: 35px;
                }
        </style>
    </head>
    <body>
        <h1>这是测试页面</h1>
        <p>哈撒旦发射点为如果岁的法国和微软压缩的父亲为发射点发发</p>
    </body>
</html>

三 、类选择器

  • 也称之为class选择器
  • 这是我们用的最多的
  • 可以为一类标签进行同意的修饰,设置类的名字的方法是:定义:class=xx                            使用:.类名

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            li{
                font-size: 30px;
                }
            .t1{
                color: red;
                }
            .t2{
                color: blue;
                }
        </style>
    </head>
    <body>
            <h1 class="t2">列表</h1>
            <ul>
            <li class=t1>篮球</li>
            <li class=t1>足球</li>
            <li class=t1>乒乓球</li>
            <li class=t1>排球</li>
            <li class=t2>西瓜</li>
            <li class=t2>苹果</li>
            <li class=t2>水蜜桃</li>
            </ul>
    </body>
</html>

四、id选择器

设置类的名字的方法是

定义:id=xxx    使用:#类名

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            li{
                font-size: 30px;
            }
            #t1{
                color: red;
                }
            #t2{
                color: blue;
                }
        </style>
            </head>
    <body>
        <h1 id="t2">列表</h1>
        <ul>
             <li id=t1>篮球</li>
            <li id=t1>足球</li>
            <li id=t1>乒乓球</li>
            <li id=t1>排球</li>
            <li id=t2>西瓜</li>
            <li id=t2>苹果</li>
            <li id=t2>水蜜桃</li>
        </ul>
    </body>
</html>


五、选择器属性

1 尺寸属性

  • width
  • heigh

2 字体属性

  • font-size:设置字体大小
  • font-family:字体类型:宋体、微软雅黑
  • font-style:设置字体倾斜
  • font-weight:设置字体加粗,bold

3 文本属性

  • color:字体颜色
  • text-decoration:文本的修饰线,取值
  • none:不显示线
  • underline:下划线
  • overline:上划线
  • line-through:删除线 t
  • ext-align:设置水平对齐方式:left、center、right
  • text-indent:设置首行缩进几个字符
  • line-height:设置行高

    关于a标签的状态:

  • link:表示a标签的默认状态【点击前】
  • hover:将鼠标放到a标签上面时候的状态
  • visited:点击过a标签以后,a 标签的状态
  • active:点击a标签,但是鼠标没有松开时候的状态
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值