css基础

最新推荐文章于 2024-09-13 23:28:46 发布

weixin_42459646

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量222

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_42459646/article/details/81558089

版权

一、CSS简介
1.什么是CSS
层叠式样式表（Cascading Style Sheets）
CSS是对HTML进行修饰的语言
   层叠式：层层覆盖叠加用CSS修饰HTML的时候优先级
   样式表：CSS属性样式的集合
2.CSS的作用
A.可以对HTML进行修饰使得HTML更加美观
B.提高样式表的复用率
C.文本与样式完全分离
3.CSS引用方式和书写规范
1）内嵌式
把CSS样式嵌入到HTML标签中,使用一次
语法：
<div style="color:red;font-size:14px;">我的第一个CSS样式</div>
语法分析：
1.使用style属性将CSS样式嵌入到HTML标签中
2.属性的属性规范属性：属性值
3.多个属性使用分号分割
不建议使用：违背W3C标准


2）内部样式
在head标签中使用style进行样式引入本页面可以使用该样式
语法：
<style type="text/css">
           div{
           color:red;
           font-size:14px;
           }
           </style>
   语法分析：
   1.使用style标签引入CSS样式
   <style type="text/css">
   属性：type告知浏览器使用CSS样式解析器区解析代码
   2.属性的属性规范属性：属性值
3.多个属性使用分号分割
3）外部样式
将CSS样式提取出来形参CSS文件谁使用谁调用多个页面可以使用同个样式
   链接式：
   <link href="demo1.css" type="text/css" rel="stylesheet"/>
   语法分析：
   1）创建一个CSS文件，将CSS属性写入到CSS文件中
   2）在head标签中使用link标签引入
   <link href="demo1.css" type="text/css" rel="stylesheet"/>
   rel:代表引入文件与HTML的关系
   type:告知浏览器使用CSS样式解析器区解析代码
   href:CSS文件地址
   3）属性的属性规范属性：属性值
4）多个属性使用分号分割


   导入式：
   @import
   <style type="text/css">
           @import url("demo1.css");
           </style>

   链接式与导入式的区别
   1）link所有浏览器都支持导入式部分低版本IE不支持
   2）先加载HTML文件再加载CSS样式
   3）import不支持js动态修改
二、CSS选择器****
1.基本选择器
A.标签选择器
语法：
HTML标签{CSS样式}
案例：
<span>我的第一个CSS样式</span>
<style type="text/css">
       span{
       color: red;
       font-size: 14px;
       }
       </style>
2id选择器
语法：
#选择器名字{CSS样式}
案例：
<style type="text/css">
       #div1{
       background-color: red;
       }
       #div2{
       background-color: #ff0;
       }
       </style>

       <body>
       <div id="div1">HELLOCSS1</div>
       <div id="div2">HELLOCSS2</div>
       </body>
3class选择器
语法：
.class选择器名字{CSS样式}
案例：
<style type="text/css">
       .style1{
       background-color: red;
       }
       .style2{
       background-color: yellow;
       }
       </style>

       <body>
       <div class="style1">div1</div>
       <div class="style2">div2</div>
       <div class="style1">div3</div>
       </body>

       优先级：id选择器>class选择器>标签选择

2.属性选择器
语法：
基本选择器[属性='属性值']{CSS样式}
案例：

       <style type="text/css">
       input[type='text']{ background-color: red;}
       input[type='password']{ background-color: yellow;}
       </style>

       <body>
       username:<input type="text" name="username"/><br/>
       password:<input type="password" name="password"/><br/>
       </body>
   3.伪元素选择器
   a标签的伪元素选择器
   语法：
   静止状态 a:link{CSS样式}
   悬浮状态 a:hover{CSS样式}
   触发状态 a:active{CSS样式}
   完成状态 a:visited{CSS样式}
   案例：
   <style type="text/css">
       a:link{ color: red;}
       a:hover{ color: blue; font-size: 28px;}
       a:active{ color: black;}
       a:visited{ color: green;}
       </style>

       <body>
       <a href="#">点击我吧</a>
       </body>
   4.层级选择器
   语法：
   父级选择器子级选择器
   案例：
   <style type="text/css">
           #d1 .dd2 span{ background-color: red;}
           </style>

           <body>
           <div id="d1">
           <div class="dd1"><span>div1</span></div>
           <div class="dd2"><span>div2</span></div>
           </div>
           <div id="d2">
           <div class="dd1"><span>div1</span></div>
           <div class="dd2"><span>div2</span></div>
           </div>
           </body>
三、CSS样式***
1.文字属性
font-size:字体大小
font-family:字体类型
2.文本属性
color:字体颜色
text-decoration:下划线
text-align:文本对齐方式
属性值：left center right
案例：
<style type="text/css">
   div{ color: blue; text-decoration: underline; cursor:pointer;}
   a{ text-decoration: none;}
   a:link{ color: black; cursor: text;}
   /* cursor:pointer; 小手 cursor:crosshair;十字 cursor: text; 普通文本 */
   </style>

   <body>
   <div>HELLOCSS</div>
   <a href="#">点击我吧</a>
   </body>
3.背景属性
background-color:背景颜色
background-image: 背景图片
   属性 url("图片地址")
background-repeat: 平铺方式
   属性：
   repeat：横纵平铺默认
   repeat-x:横向平铺
   repeat-y:纵向平铺
   no-repeat:不平铺
案例：
<style type="text/css">
       body{
       background-color: black;
       background-image: url("images/dog.gif");
       background-repeat: no-repeat;

       /* background: url("images/dog.gif") repeat-x black; */

       background-size: 80px 60px;
       }
       </style>
4.列表属性
list-style-type:列表前可以加小点
    值：
list-style-image:列表前面小图片

案例：
<style type="text/css">
       ul{
       /* list-style-image: url("images/forward.gif"); */
       /* list-style-type: decimal-leading-zero; */
       /* list-style-position: outside; */
       list-style: none;
       }
       </style>

       <body>
       <ul>
       <li>苹果</li>
       <li>香蕉</li>
       <li>桃子</li>
       </ul>
       </body>
5尺寸属性
width:宽度
height：高度
案例：
<style type="text/css">
#d1{
background-color: red;
width: 200px;
height: 200px;
}
#d2{
background-color: blue;
}
   </style>

   <body>
   <div id="d1">div1</div>
   <div id="d2">div2</div>
   </body>
6.显示属性
display:
属性值：none隐藏
block(块级显示)
inline(行级显示)
案例：
<style type="text/css">
       #d1{
       background-color: red; display: inline;
       }
       span{
       background-color: blue; display: block;
       }
       </style>

       <body>
       <div id="d1">div1</div>
       <div>div2</div>
       <span>span</span>
       </body>
       <style type="text/css">
       a:hover #d1{
       width: 200px;
       height: 200px;
       border:1px solid red;
       display: block;
       }
       </style>
       <body>
       
       <a href="#">点击我吧<div id="d1"></div></a>
       </body>

7.浮动属性
float:
属性值： left right
clear:
属性值： left right both*
四、盒子模型
边框
border
border-color:边框颜色
border-width:边框宽度
border-style:边框样式

border-top:上边框
border-left:左边框
border-right:右边框
border-bottom：下边框

border:1px 2px 3px 4px;上右下左
border:1px 2px; 上下左右
border:1px 2px 3px; 上1 左右2 下3
border:1px;

padding:内边距
padding-top:上内边距
padding-left:左内边距
padding-right:右内边距
padding-bottom：下内边距

margin:外边距
margin-top:上外边距
margin-left:左外边距
margin-right:右外边距
margin-bottom:下外边距