CSS样式学习

最新推荐文章于 2023-06-30 09:36:11 发布

鸭梨的药丸哥

最新推荐文章于 2023-06-30 09:36:11 发布

阅读量9.1k

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/qq_43203949/article/details/105877408

版权

CSS样式学习

1.css概述

css（cascading style sheet）:是一种层叠样式表语言

css的作用是修饰HTML页面，设置html元素的样式，让HTML页面更加好看。

css样式能写在html文件中，css的存在就是修饰HTML。

html中使用css样式的方法

方式一：在style属性中设置元素的css样式，这种方式称为内联定义
格式：
<标签 style="样式名:样式值;样式值:样式名······"></标签>

方式二：样式块（在head标签当中使用style块）
格式：
<head>
    <style>
        选择器{
            样式名:样式值；
            样式名:样式值；
            ······  
        }
        选择器{
            样式名:样式值；
            样式名:样式值；
            ······  
        }
    </style>
</head>

第三种方式：链入外部外部样式表文件（将样式写到一个独立的xxx.css文件中）
链入语法格式：
	<link type="text/css" rel="stylesheet" href="文件路径"/>
这种方式易于维护

第一种方式：

<!doctype html>
<html>
	<head>
         <meta charset="utf-8"/>
        <title>html中用css样式第一种方式</title>
       
    </head>
    <body>
        <!--
	常见的样式 width 宽度样式
			 height 高度样式
			 background-color 背景颜色颜色
			 display 布局样式（none隐藏，block显示）
			 border 边框样式
			 border-color边框颜色样式
			 border-width边框宽度样式
			 border-style边框种类样式
			 更多样式可以看文档
		-->
        
        <div style="width:300px;height:300px; border:1px solid black"></div>
        
        <div style="width:300px;height:300px;background-color:red ; border-width:1px; border-style:solid"></div>
    
    </body>
</html>

第二种方式引入：

<!doctype html>
<html>
	<head>
        <meta charset="utf-8"/>
        <title>html中用css样式第一种方式</title>
        
        
        <style>
        	/*css注释*/
            /*id选择器，选择某个id使用{}中的样式,id唯一*/
            #use{
                color:red;
                font-size:10px;
            }
            /*标签选择器*/
            div{
                background-color:blue;
            }
            /*类选择器*/
            .mystyle{
                background-color:red;
            }
            /*
            1)Css定义位置的优先级：（离元素越近，优先级越高） “元素上的style” > “文件头上的style元素” >“外部样式文件”

特例：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

2）关于选择器的优先级：(越精确，优先级越高) id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
            */
            
        </style>
        
    </head>
    <body>
        <!--
	常见的样式 width 宽度样式
			 height 高度样式
			 background-color 背景颜色颜色
			 display 布局样式（none隐藏，block显示）
			 border 边框样式
			 border-color边框颜色样式
			 border-width边框宽度样式
			 border-style边框种类样式
			 position定位样式
			 left左定位
			 top头定位
			 cursor鼠标点击图标
			 更多样式可以看文档
		-->
        
        <div id="use">这里是div块,使用了id选择器</div>
        
        <div >这里是div块,使用了id选择器</div>
    
    </body>
</html>

CSS样式定义的优先级顺序总结https://blog.csdn.net/zztfj/article/details/6731008

第三种方式

<!doctype html>
<html>
	<head>
         <meta charset="utf-8"/>
        <title>html中用css样式第一种方式</title>
       	
        <link rel="stylesheet" type="text/css" href="文件路径"/>
    </head>
    <body>
        <div></div>
    
    </body>
</html>

本文只介绍简单的样式，不做深入探索。
下一章：js基础总结https://blog.csdn.net/qq_43203949/article/details/106404883.

鸭梨的药丸哥

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS样式学习

CSS样式学习1.css概述css（cascading style sheet）:是一种层叠样式表语言css的作用是修饰HTML页面，设置html元素的样式，让HTML页面更加好看。css样式能写在html文件中，css的存在就是修饰HTML。html中使用css样式的方法方式一：在style属性中设置元素的css样式，这种方式称为内联定义格式：<标签 style="样式名:...
复制链接

扫一扫