CSS基础

最新推荐文章于 2024-08-15 15:20:23 发布

光年的博客

最新推荐文章于 2024-08-15 15:20:23 发布

阅读量502

点赞数

分类专栏： JavaWeb 文章标签： css html

本文链接：https://blog.csdn.net/katol/article/details/122256891

版权

JavaWeb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、CSS的简介

css的简介
    *css：层叠样式表

            **层叠：一层一层的

            **样式表

                很多属性和属性值
    *使界面显示效果更加号
    *css将网页内容和显示效果进行分离，提高了显示功能

2、CSS和HTML的结合方式（四种结合方式）

（1）在每个html标签上面都有一个属性style，把css和html结合在一起

        -<div style="background-color:red;color:green;">

（2）使用html的一个标签来实现<style>标签，写在head里面

        *<style type="text/css">

                css代码；
        </style>
        
        *<style type="text/css">

               div{
                    background-color:blue;
                    color:red;
                    }
        </style>
(3)在style标签里面，使用语句(在某些浏览器下不起作用)
        @import url(css文件的路径)；
        
        -第一步，创建一个css文件
        
        <style type="text/css">
                     @import url(div.css)；
        </style>
(4)使用头文件link，引入外部css文件
        -第一步，创建一个css文件

        -<link rel="stylesheet" type="text/css" href="css文件路径"/>

***第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式

***优先级（一般情况）
        由上到下，由外到内，优先级由高到低
        后加载的优先级高
***格式 选择器名称（属性名：属性值；属性名：属性值.....）

3、css的基本选择器（三种）

css的基本选择器（三种）
    **要对哪个标签利曼的数据进行操作
    
    （1）标签选择器
            *使用标签名作为选择器名称
                div{
                    background-color:gray;

                    color:white;
                }
     (2) class选择器
            *每个html标签都有一个属性class
    （3）id选择器
            *每个html标签上面有一个属性id
            -<div id="hehe">bbbbb</div>
            -#hehe{
                    background-color:#333300;
            }
    **优先级
            style > id选择器 > class选择器 > 标签选择器
4、css的扩展选择器
    （1）关联选择器
        *<div><p>1111111111</p></div>
        *设置div标签里面的p标签的样式
        *    div p{
                background-color：green；
            }
    （2）组合选择器
        *<div>111</div>
         <p>222</p>
        *把div和p标签设置成相同的样式，把不同的标签设置橙相同的样式
        *div，p{
                background-color：red；
            }
    (3)伪元素选择器
        *在css里面提供一些定义好的样式，可以拿来使用
        *比如超链接
                ***超链接的状态
                    原始状态        鼠标放上去        点击        点击之后
                    ：link          ：hover          ：active    ：visited

5、css的盒子模型

CSS的盒子模型
        **在进行布局前需要把数据封装到一块一块的区域内（div）
        （1）边框
            border：2px solid blue;
            border:同意设置
            上：border-top
            下：border-bottom
            左：border-left
            右：border-right
        (2)内边框
            padding：20px
            使用padding同意设置
            也可以分别设置
            上下左右四个边距
        (3)外边框
            margin:20px;
            可以使用margin统一设置
            也可以分别设置
            上下左右四个外边框

6、css的布局的漂浮

css的布局的漂浮（了解）
        float：
            **属性值
            left：文本流向对象的右边
            right：文本流向对象的左边

7、css的布局的定位

css的布局的定位

         position：
            **属性值
                ——absolute：
                    ***将对象从文档流中脱出
                    ***可以使用top、bottom等属性进行绝对定位
                ——relative：
                    ***不会我对象从文档流中拖出
                    ***也可以使用top、bottom等属性进行绝对定位

8.案例

（1）图文混排
<html>
    <head>
        <title>图文混排案例</title>
        <style type="text/css">
            #imgtex11{
                width:400px;
                height:300px;
                border:2px dashed orange;
            }
	#img11 {
	float:left;
	}
	#tex11{
	color:green;

	}
        </style>
    </head>

    <body>
        <div id="imgtex11">
        <div id="img11" ><img src="C:\Users\Administrator\Desktop\song\404.jpg" width="250" height="200"/></div>    
        <div id="tex11">eeeeeeeeewewqeqweqweqqwwwqeqwewqeqw</div>
        </div>
    </body>
</html>

(2)图像签名
<html>
    <head>
        <title>图文签名</title>
        <style type="text/css">
          #tex21{
	    position:absolute;
	    top:20px;
	    left:30px;
	    color:red;
	    }
        </style>
    </head>

    <body>
         <div id="img21"><img src="C:\Users\Administrator\Desktop\song\404.jpg"width="450" height="350"/></div>
      	<div id="tex21">图片找不到了</div>
    </body>
</html>