CSS样式学习

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.

posted @   鸭梨的药丸哥  阅读(31)  评论(0)  编辑  收藏  举报  
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示