css基础

最新推荐文章于 2024-10-01 23:54:35 发布

zy13955413303

最新推荐文章于 2024-10-01 23:54:35 发布

阅读量156

点赞数

本文详细介绍了CSS的基础知识，包括引入方式、各类选择器如基本选择器、群组选择器、伪类选择器等的使用方法，以及常用属性如背景属性、文字属性等的应用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css基础

引入方式

行内标签内部添加 style=”“
内联
外链

选择器

基本选择器

id 标签添加id 作为标志这个id 是唯一的

#test{
    font-size:16px;
}

<div id="test">

</div>

class 根据类查找一个页面的标签类可以重复意思就是具备相同属性的标签

.test{
    font-size:16px;
}

<div class="test">

</div>

<p class="test">

</p>

根据标签查找

需求:所有的span标签全部大小50px

span{

}

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>

通配符选择器

需求: 页面上所有的字体全部微软雅黑   

*{

}

子选择器只能控制指定标签下一级子元素的样式

格式

选择器 > 选择器  

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子选择器</title>
        <style>
            #test > p{
                font-size: 20px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="test">
            <p>haha</p>
            <div>
                <p>xixi</p>
            </div>
        </div>
<p>1234</p> 
    </body>
</html>

后代选择器只要是该标签下面的子标签都会修改样式

选择器 空格 选择器{
    样式规则:值;
    //
    /**/
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>后代选择器</title>
        <style type="text/css">
            #test p{
                background: pink;
            }
        </style>
    </head>
    <body>
        <div id="test">
            <p>haha</p>
            <div>
                <p>xixi</p>
                <div >
                    <p>hehe</p>
                </div>
            </div>
        </div>
        <p>1234</p>
    </body>
</html>

群组选择器多个没有关联的标签设置为相同的样式

选择器1，选择器2,选择3{
    用逗号隔开 
}

　目标选择器　　找到目标以后　让目标改变样式　

结合锚点　来用　

选择器:target{
    样式规则:值；
}

例子　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>目标选择器</title>
        <style type="text/css">
            #test1:target{
                color:red;
            }
            #test:target{
                background: pink;
                font-size:50px;
            }
        </style>
    </head>
    <body>

        <a href="#test1">目标</a>
        <a href="#test">目标2</a>


        <div id="test">
            哈哈哈
        </div>
        <h1 id="test1">我要找到谁</h1>
    </body>
</html>

伪类选择器

动态伪类选择器
状态伪类选择器

状态伪类选择器用的时候不能用先找到父元素然后匹配必须是多个标签用标签名去匹配

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>状态伪类选择器</title>
        <style type="text/css">
            input:disabled{    #匹配的是 被禁用的    适用于 radio  checkbox 
                width: 100px;
                height: 100px;
            }

            input:enabled{   #匹配的是 被禁用的    适用于 radio  checkbox
                width: 50px;
                height: 50px;
            }
            p:empty{  匹配空标签
                background: red;
                width: 50px;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <form action="">

            <input type="radio" name="sex" value="0" disabled/>
            <input type="radio" name="sex" value="0"/>
            <input type="radio" name="sex" value="0"/>
            <p>asdf</p>
            <p>122</p>
            <p></p>

        </form>
    </body>
</html>

动态伪类选择器

标签可以有n种样式默认一个样式鼠标移入样式发生改变这就是动态伪类选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动态伪类选择器</title>
        <style>
            a:visited{  #被访问过后 
                color: pink;
            }
            a:link{  #未访问的 
                color: orange;
            }
            a:hover{ #鼠标放上去
                color: green;
            }

            a:active{ #激活 按钮不松手
                color: black;
            }
            .test{
                width: 100px;
                height: 100px;
                background: #FFFF00;
            }
            .test:hover{
                background: red;
            }
        </style>
    </head>
    <body>
        <a href="qq.html">QQ</a>
        <a href="lunyu.html">qq</a>
        <div class="test">
            阿什顿飞
        </div>
        <div class="test">
            阿什顿飞
        </div>
        <div class="test">
            阿什顿飞
        </div>
        <div class="test">
            阿什顿飞
        </div>
    </body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p:before{  #在指定的标签前面 加入内容
                content: '如果你前男友和现男友';
            }
            p:after{ #在指定的标签后面加入内容 
                content: '做我女朋友行不行,不行的话我再想想办法';
            }
        </style>
    </head>
    <body>
        <p>同时掉水里,我可以做你男朋友么</p>
        <p>同时掉水里,我可以做你男朋友么</p>
        <p>同时掉水里,我可以做你男朋友么</p>
    </body>
</html>

属性伪类选择器

选择器:first-letter{ 文本首字母  只适用于操作段落 p标签

}
选择器:first-line{ 文本的首行

}
选择器:first-child{  首个子元素

}

<img src="" alt="" title="">
<img src="" alt="" >
<img src="" alt="" title="">

选择器[属性名]{
    标签包含该属性的匹配到
}
选择器[属性名][属性1]{
    标签同时包含属性 属性1的 匹配到
}
选择器[属性名="值"]{
    标签包含该属性 并且属性的值为目标 的匹配到
}
选择器[属性名~="值"]{
    标签包含该属性 并且属性的值为目标 的匹配到
}

一个标签 的属性 可以有多个值   多个值之间用 空格隔开
比如
.a{
    width:100px;
}

.b{
    height: 100px;
}

.c{
    background: yellow;
}
<div class="a b c">
    Python1806
</div>

例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style type="text/css">
            a[class]{
                 background: red;
            }
            a[title][class]{
                 background: yellow;
            }
            a[class="pDemo1"]{
                background: deeppink;
            }
            img[title]{
                width: 10px;
                height:20px;
            }

            a[class~="a"]{
                background: orange;
            }
            .a{
                width:100px;
            }

            .b{
                height: 100px;
            }

            .c{
                background: yellow;
            }
        </style>

    </head>
    <body>
        <a href="#">哈哈</a>
        <a href="#" class="a is good">呵呵</a>
        <a href="" title="demo" class="a is best">yellow</a>
        <a href="" title="demo" class="a b c">pink</a>
        <img src="img/效果图.jpg" alt="内容" />
        <img src="img/效果图.jpg" alt="内容" title="haha"/>
        <div class="a b c">
            Python1806
        </div>
    </body>
</html>

相邻兄弟选择器两个标签拥有共同的父级元素

选择器1 + 选择器2 {
    //要求选择器1 选择器2 必须在一个父级标签下   
    紧邻着标签1的  标签2 给一个样式
}


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>兄弟选择器</title>
        <style type="text/css">
            p + span {  #紧邻着 p标签的 span标签 字体变成黄色 
                color: yellow;
            }
        </style>
    </head>
    <body>
        <div>
            <h2>今年七夕怎么过，掠过</h2>
            <p>七夕到了，准备怎么表白了么</p>
            <p>七夕到了，准备怎么表白了么</p>
            <p>七夕到了，准备怎么表白了么</p>
            <p>七夕到了，准备怎么表白了么</p>
            <p>七夕到了，准备怎么表白了么</p>
            <span>1234568910</span>
        </div>
    </body>
</html>

优先级的问题

行内最高其次 id选择器 1000 再者 class选择器 100 最后标签选择器 10

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>兄弟选择器</title>
        <style type="text/css">
            h2 + a {
                color: yellow;
            }
            .test{
                color:blue;
            }
            #ids{
                color: green;
            }
        </style>
    </head>
    <body>
        <div>
            <h2>今年七夕怎么过，掠过</h2>
            <a href="">haha</a>
            <p class="test" id="ids">七夕到了，准备怎么表白了么</p>
            <p>七夕到了，准备怎么表白了么</p>
            <p>七夕到了，准备怎么表白了么</p>
            <p>七夕到了，准备怎么表白了么</p>
            <p>七夕到了，准备怎么表白了么</p>
            <span>1234568910</span>
        </div>
    </body>
</html>

css 常用属性

背景属性

background 复合属性

background-color 背景色

background-image:url() 背景图片

background-image:none 没有背景图片

background-repeat ：repeat|no-repeat|repeat-x|repeat-y

repeat：横向纵向

no-repeat :不平铺

repeat-x:横向平铺

repeat-y ：纵向

background-attachment: scroll|fixed

scroll 随着内容的滚动而滚动

fixed 内容滚动图片固定

background-position: 一般结合图片来使用

两个选项 length 长度数字百分比

position 坐标 top center bottom left right

div{background:url("图片路径");background-position:40% 50%;} 宽和 高
div{background:url("图片路径");background-position:100 200;}
div{background:url("图片路径");background-position:center center;}

文字属性 font

属性	说明
color	文字的颜色
font-size	文字大小
font-family	字体的种类宋体微软雅黑
font-weight	文字的粗细
font-variant	小写的字母以大写的字母显示

 color:red;
 font-size: 18px;   
 font-weight: bolder;
 font-family: "微软雅黑";
 font-variant: small-caps;

文本属性 text

属性	说明
text-align	center\|left\|right
line-height	行间距实现文本的垂直居中行高跟宽度 width设置成一样的重点
text-indent	首行缩进
text-decoration	文本的下划线（none\|underline 下\|overline 上\|line-through 横穿）
letter-spacing	字间距

text-align: center;
line-height: 20px;
text-indent: 2em;
text-decoration: line-through;
letter-spacing: 10px;

表格属性

属性	简介
border-collapse	是否合并表格边框 separate 分开 \| collapse 合并
border-spacing	相邻单元格边框的距离 cellpadding 表格和内容之间距离 cellspacing 单元格之间的距离

border: 1px dashed pink;
1px 表示 边框的粗细  0px 表示没有边框 
dashed 虚线  solid 实线  
pink 边框的颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table{
             border-collapse: collapse;
            }
            table,tr,th{
                border: 1px dashed pink;
                border-spacing: 2px;
            }
        </style>
    </head>
    <body>
        <table border="" cellspacing="单元格之间的距离" cellpadding="表格和内容之间距离">
            <tr><th>Header</th></tr>
            <tr><td>Data</td></tr>
        </table>
    </body>
</html>

尺寸

尺寸	说明
width	px、em 宽度百分比
height	元素标签
max-width	最大的宽度
min-width	最先宽度
max-height	最大高度
min-height	最小高度

图片属性

属性	说明
vertical-align	图片和文字的对齐方式 top\|middle\|bottom\|percentage

超链接属性

a:link{

没有访问过的链接

}

a:visited{

访问过的连接

}

a:hover{

鼠标滑过的连接

}

a:active{

鼠标滑过的连接

}

光标的属性

“`

#ids{
cursor: pointer;
}

爱的发生的发

 cursor： 
    pointer 小手的形状
    wait   表示程序正忙
    auto   浏览器设置的类型
    default  鼠标默认的类型
    crosshair 十字架
    move 可移动
    text 表示光标指示的是一个文本

“`

列表的属性

属性	说明
list-style

例子

list-style: url("img/1.png"); 可以用自定义的图标当作列表前面的标志 
list-style-type: circle  空心 
                disc  实心  默认也是实心
                square 方块 黑方块
                decimal 以数字的形式展示

## 显示和隐藏属性

display

block 显示

none 隐藏

例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            li{
                /*list-style: url("img/1.png");*/
            }
            #test{
                display:block;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
        <div id="test">
            可爱不是长久之计，爱我是长久之计
        </div>
    </body>
</html>

盒子模型相当重要

margin 盒子与盒子的距离也可以认为是盒子距离浏览器的距离外边距
- margin-top
- margin-bottom
- margin-left
- margin-right
padding 内边距内容距离边框的距离
- padding-top
- padding-bottom
- padding-left
- padding-right
border 盒子的边框 border:5px solid red;
- border -top
- border -bottom
- border -left
- border -right
content 文字或者图片也可是标签或者其它盒子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style type="text/css">
            .box{
                width: 500px;
                height: 200px;
                background: orange;
                margin: 30px;

                border: 5px solid cadetblue;

                padding: 30px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            盒子里边的内容
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型2</title>
        <style>
            /*div 所占的宽度 包含 with padding margin border*/
            .box{
                width: 200px;
                height: 200px;
                background: pink;
                /*边框属性开始*/
                border-top: 10px solid green;
                border-bottom: 5px solid green;
                border-left: 8px solid green;
                border-right: 6px solid green;
                /*边框属性结束*/


                /*内边距开始*/
                padding: 10px;
                /*padding: 10px; 上下左右都是10px;*/
                /*padding: 10px 20px;10px 上下  20px 表示左右
                padding: 10px 20px 30px;10px 上 20px 左右  下 30px;
                padding: 10px 20px 30px 40px;//上右下左 顺时针 */ 
                /*内边距结束*/


                /*外边距 
                margin: 20px;
                margin: 20px 30px;上下20 左右 30
                margin: 20px 30px 50px;
                margin: 30px 40px 50px 60px;*/
                margin: 10px 20px 30px 40px; 上 右 下 左
                text-align: center;
                line-height:30px;

            }


        </style>
    </head>
    <body>
        <div class="box">
            大吉大利，今晚吃鸡  再接再厉，下次吃鸡
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型3</title>
        <style>
            #box{
                width: 200px;
                height: 200px;
                background: yellow;
                border-left-width: 30px;
                border-right-width: 40px;
                border-top-width: 50px;
                border-bottom-width: 60px;

                border-left-style: double;
                border-right-style: solid;
                border-top-style: dashed;
                border-bottom-style: dotted; 

                border-left-color: red;
                border-right-color: blue;
                border-top-color: pink;
                border-bottom-color: orange;

                /*
                 double 双线
                 solid 实线
                 dashed 虚线 
                 dotted 点线
                 * */
            }

            #box2{
                width: 200px;
                height: 200px;
                background: yellowgreen;
                margin-top: -10px;
                padding: 20px;
            /*  border-radius:10px;
                border-radius:100px;*/
                border-radius:50%;
            }
        </style>
    </head>
    <body>
        <div >box</div>
        <div >box2</div>

        <div id="box">
            box
            <div id="box2">
                box2
            </div>
        </div>
    </body>
</html>