2.css基础知识

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

dml111727

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

阅读量258

点赞数

分类专栏： javaweb 笔记文章标签： css的基础知识

本文链接：https://blog.csdn.net/qq_35638837/article/details/76221420

版权

笔记同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

javaweb

9 篇文章 0 订阅

订阅专栏

1.css理解

作用:
- 渲染页面
- 提高工作效率

2.div标签

<div></div> <!--占据一行-->

span:行内的块标签

<span><span><!--不换行-->

3.css和html元素的整合

方式1:内联样式表通过标签的style属性设置样式
方式2:内部样式表在当前页面中使用的样式

通过head标签的style子标签导入
例如:
<style>
    #divId2{
        background-color: #0f0;
    }
</style>

方式3:外部样式表有独立的css文件，通过head标签的link子标签导入
例如:

<link rel="stylesheet" href="css/1.css" type="text/css"/>

案列代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--内部样式表-->
        <style>
            #divId2{
                background-color:#0f0;
            }
        </style>
        <!--外部样式表需要导入-->
        <link rel="stylesheet" href="../css/1.css" type="text/css"/>
    </head>
    <body>
        <div>哈哈哈</div>
        <div style="background-color: red;">哈哈哈--内联样式表</div>
        <div id="divId2">哈哈哈--内部样式表</div>
        <div id="divId3">哈哈哈</div>
    </body>
</html>

1.css文件的代码，在css文件夹

#divId3{
    background-color: #00f;
}

4.选择器

id选择器：一个元素(标签)

要求:
 - html元素必须有id属性且有值   <xxx id="id1"></xxx>
 - css中通过"#"引入,后面加上id的值  #id1{...}

class选择器：一类元素

要求:
    html元素必须有class属性且有值 <xxx class="cls1"/>
    css中通过"."引入,后面加上class的值  .cls1{...}

元素选择器：一种元素
- 直接用元素(标签)名即可元素名{…}

4.1派生选择器

属性选择器：元素选择器的特殊用法

要求:
    html元素必须有一个属性不论属性是什么且有值：
    <元素名 nihao="wohenhao"/>
    css中通过下面的方式使用
        元素名[属性="属性值"]{....}
        例如:
            元素名[nihao="wohenhao"]{....}

后代选择器
- 格式：选择器后代选择器元素名{…}
- 在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式

案例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style>
            <!--id选择器-->
            #spanid{
                background-color: gold;
            }
            #divId1{
                background-color: #0000FF;
                width: 50%;
            }
            <!--class选择器-->
            .class1{
                background-color: aqua;
            }
            <!--元素选择器-->
            span{
                background-color: #ff0;
            }
            <!--属性选择器-->
            span[att="haha"]{
                background-color: red;
            }
            <!--后代选择器，div下的span-->
            div span{
                font-size: 1cm;
            }
        </style>
        <link rel="stylesheet" href="../css/1.css" />
    </head>
    <body>
        <div id="divId1">哈哈哈--id选择器</div>
        <div class="class1">哈哈哈--class选择器</div>
        <span>哈哈哈--元素选择器</span>
        <span att="haha">哈哈哈--属性选择器</span>
        <span class="class1" att="haha">哈哈哈</span>
        <span id="spanid" att="haha">哈哈哈</span>
        <div>
            <span>div下的span哈哈哈</span>
        </div>
    </body>
</html>

4.2锚伪类选择器

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

案例代码(字体颜色根据状态改变颜色)

<!--鼠标移动，字体变颜色，不同状态，显示不同颜色-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a:link {color: #FF0000} /* 未访问的链接 */
            a:visited {color: #00FF00}  /* 已访问的链接 */
            a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
            a:active {color: #0000FF}   /* 选定的链接 */
        </style>
    </head>
    <body>
        <a href="#">移上来试试</a>
    </body>
</html>

注意

若多个样式作用于一个元素的时候
- 不同的样式,会叠加
- 相同的样式,最近原则
若多个选择器作用于一个元素的时候
- 越特殊优先级越高 id优先级最高

5.属性

5.1字体

font-family:设置字体(隶书) 设置字体家族
font-size:设置字体大小(可以设置cm单位)
font-style:设置字体风格

案列代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div0{
                font-family: "隶书";
            }
            #div1{
                font-size: 1cm;
            }
            #div2{
                font-style: italic;
            }
            #div3{
                font-family: 隶书;
                font-size: 1cm;
                font-style: initial;
                color: #0000FF;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div id="div0">哈哈哈</div>
        <div id="div1">哈哈哈</div>
        <div id="div2">哈哈哈</div>
        <div id="div3"><a href="#">哈哈哈</a></div>
    </body>
</html>

5.2文本(改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进)

color:文本颜色
line-height:设置行高
text-decoration: 向文本添加修饰。 none underline，如设置超链接的文字无下划线
text-align:文本对齐方式

案例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div0{
                color: #FDF8C7;
            }
            #div1{
                text-align: center;
            }
            #div2{
                line-height: 100px;
            }
            #div3{

            }
            a{
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div id="div0">哈哈哈</div>
        <div id="div1">哈哈哈</div>
        <div id="div2">哈哈哈</div>
        <div id="div3"><a href="#">哈哈哈</a></div>
    </body>
</html>

5.3列表

list-style-type:设置列表项的类型例如:a 1 实心圆
list-style-image:设置图片最为列表项类型
- 使用的时候使用 url函数 url(“/i/arrow.gif”);

5.4背景

background-color:设置背景颜色
background-image:设置图片作为背景 url

5.5尺寸

width:
height:

5.6浮动

float: 可选值 left right
可以将div排在一行

案例代码

<!--一行显示4个div-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .divClass{
                background-color: #0000FF;
                border: 1px solid red;
                height: 50px;
                width: 50px;
                float: left;
            }
            <!--实现换行-->
            .clear{
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="divClass">哈哈哈</div>
        <div class="divClass">哈哈哈</div>
        <div class="divClass">哈哈哈</div>
        <div class="divClass">哈哈哈</div>

        <!--换行-->
        <div class="clear"></div>

        <div class="divClass">哈哈哈</div>
        <div class="divClass">哈哈哈</div>
        <div class="divClass">哈哈哈</div>
        <div class="divClass">哈哈哈</div>
    </body>
</html>

6.分类

clear:设置元素的两边是否有其他的浮动元素
- 值为:both 两边都不允许有浮动元素
display:设置是否及如何显示元素。
- none:此元素不会被显示。元素不显示
- block:此元素将显示为块级元素，此元素前后会带有换行符。 使元素换行
- inline:默认。此元素会被显示为内联元素，元素前后没有换行符。使元素失去换行的特性

.menu ul li{
    list-style-type: none;
    display: inline;
}

7.框模型

一个元素外面有padding(内边距) border(边框) margin(外边距)
- padding:元素和边框的距离
- margin:元素最外层的空白(元素与元素之间的距离
- border(边框)，还可以设置颜色风格

简写属性:
    border:宽度   风格 颜色;

    border:5px solid red;

    solid:实线
    dashed:虚线
    double:双实线

dml111727

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2.css基础知识

1.css理解作用: - 渲染页面 - 提高工作效率2.div标签<div></div> span:行内的块标签<span><span>3.css和html元素的整合方式1:内联样式表通过标签的style属性设置样式方式2:内部样式表在当前页面中使用的样式通过head标签的style子标签导入例如:<style> #divId2
复制链接

扫一扫