CSS基础

最新推荐文章于 2023-08-18 20:40:23 发布

乐乐冲冲冲

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量220

点赞数

文章标签： css java

本文链接：https://blog.csdn.net/weixin_48736002/article/details/119783210

版权

CSS

Cascading Style Sheet 层叠级联样式表
CSS优势
- 内容和表现分离
- 网页结构表现同意，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利于SEO，容易被搜索引擎收录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门</title>
    <!--内部样式：style标签中可以写CSS代码-->
    <style>
        h1{
            color: aqua;
        }
    </style>
</head>
<body>

<h1>董乐乐男神</h1>

<!--优先级：就近原则-->

<!--行内样式：在标签元素中，编写一个style属性，编写央视即可-->
<h2 style="color: aquamarine">我是你爸爸</h2>
</body>
</html>

1.选择器

作用：选择页面上的某一个或者某一类元素

1.1基本选择器

标签选择器：选中一类标签。标签{}
类选择器：选择所有class属性一致的标签，可以复用。 .class{}
id选择器：全局唯一。 #id{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        /*标签选择器：会选择到页面上所有的这个标签的元素*/
        h1{
            color: red;
            background: aquamarine;
            border-radius: 15px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>董乐乐</h1>
<h1>董乐乐</h1>
<p>加油！</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /*类选择器的格式 .class的名称{}
          好处：可以多个标签归类，是同一个class，可以服用
        */
        .dll{color: red;}
        .jy{color: blue}
    </style>
</head>
<body>
<h1 class="dll">董乐乐</h1>
<h1 class="jy">加油</h1>
<p class="dll">奥里给</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        /* id选择器：#id名称{}
           id具有唯一性
           优先级：id选择器>类选择器
        */
        #dll1{color: cornflowerblue;}
        #dll4{color: aquamarine}
        .dll{color: cyan;}
    </style>
</head>
<body>
<h1 id="dll1">标题一</h1>
<h1 id="dll0">标题二</h1>
<h1 id="dll3">标题三</h1>
<h1 id="dll4" class="dll">标题四</h1>
<h1 id="dll5" class="dll">标题五</h1>
</body>
</html>

1.2层次选择器

后代选择器：在某个元素的后面祖爷爷爷爷爸爸二子

body 标签{ }
子选择器：儿子

body>标签{ }
相邻兄弟选择器：选定元素向下相邻的一个兄弟元素

.class+标签{ }
通用兄弟选择器：选定元素的向下所有兄弟元素

.class~标签{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
    <style>
        /*后代选择器：在某个元素的后面    祖爷爷 爷爷 爸爸 儿子*/
        body p{
            background: aquamarine;
        }
        /*子选择器 儿子*/
        body>p{
            background: aqua;
        }
        /*相邻兄弟选择器：当前选中元素的向下一个相邻兄弟元素*/
        .p2+p{
            background: red;
        }
        /*通用兄弟选择器：当前选中元素的向下所有兄弟元素*/
        .p2~p{
            background: chartreuse;
        }
    </style>
</head>
<body>
<p>p1</p>
<p class="p2">p2</p>
<p>p3</p>
<p>p4</p>
<ul>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
    <li>
        <p>p7</p>
    </li>
</ul>
</body>
</html>

1.3结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{background: chartreuse;}

        /*ul中最后一个子元素*/
        ul li:last-child{background: cornflowerblue;}

        /*选中p1：定位到父元素，选择当前的第一个元素
        p:nth-child(1)：回到p标签的父级标签body，选择body标签的第1个子元素，并且是第一个元素是p元素才生效。
        */
        p:nth-child(1){background: crimson;}

        /*p:ntn-of-type(2):选择父级标签中第2个类型位p的元素*/
        p:nth-of-type(2){background: yellow;}
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

1.4属性选择器

= 等于
*= 包含
^= 开头
$= 结尾

/*存在id属性的元素*/
a[id]{
    background: yellow;
}
a[id=first]{
    background: chartreuse;
}
/*class中有links的元素*/
a[class*="links"]{
    background:red;
}
/*选中href中以http开头的元素*/
a[herf^=http]{
    background: yellowgreen;
}
/*选中class中以item结尾的元素*/
a[class$=item]{
    background: cyan; 
}

2.美化网页元素

2.1 span标签

重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>

欢迎学习<span id="title1">java</span>

</body>
</html>

2.2 字体样式

font-family:字体
font-size:字体大小
font-weight:字体的粗细
color:字体颜色

//字体风格 粗细 大小 字体
font:oblique bolder 18px "楷体";

2.3 文本样式

1、颜色 color： rgb rgba

2、文本对齐方式 text-align:center；

3、首行缩进 text-indent:2em;

4、行高 line-height: 行高(line-height)和块的高度(height)一致，就可以上下居中

5、装饰 text-decoration:none/underline/line-through/overline

2.4 超链接伪类

/*鼠标悬浮的状态*/
a:hover{
    color: coral; //颜色
    font-size: 20px; //字体
}

2.5 列表

/*ul li
    list-style: none 去除原点
    list-style: circle 空心圆
    list-style: decimal 数字
    list-style: square 正方形
*/

2.6 背景

背景颜色

背景图片

<style>
    div{
        width: 1000px;
        height: 700px;
        border: 1px solid red;
        background-image: url("简爱.png");/*默认是全部平铺的*/
    }
    .div1{
        /*水平X平铺*/
        background-repeat: repeat-x;
    }
    .div2{
        /*垂直Y平铺*/
        background-repeat: repeat-y;
    }
    .div3{
        /*不平铺*/
        background-repeat: no-repeat;
        /*背景位置*/
        background-position:200px 52px
    }
</style>

/*颜色 图片 图片X轴 图片Y轴 平铺方式*/
background: red url("位置") 200px 20px no-repeat;

2.7 渐变色

www.grabient.com

3.盒子模型

margain：外边距

border：边框

padding：内边距

/*居中*/
/*要求：块元素，且有固定的宽度*/
margin: 0 auto;

/*border:粗细 样式 颜色*/
border:1px solid red;

/*圆角边框*/
border-radius:10px;

/*阴影*/
box-shadow:10px 10px 100px yellow;

素材网：

源码之家

ice.work

Layui.com

vue-admin-element

乐乐冲冲冲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

CSSCascading Style Sheet 层叠级联样式表CSS优势内容和表现分离网页结构表现同意，可以实现复用样式十分丰富建议使用独立于html的css文件利于SEO，容易被搜索引擎收录<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>入门</title> <!--内部样式：style
复制链接

扫一扫