Css样式

最新推荐文章于 2023-08-05 00:00:00 发布

菜鸟gb

最新推荐文章于 2023-08-05 00:00:00 发布

阅读量119

点赞数

分类专栏： Java学习文章标签： css选择器 div 属性

本文链接：https://blog.csdn.net/weixin_42738506/article/details/83387105

版权

Java学习专栏收录该内容

35 篇文章 0 订阅

订阅专栏

一、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)多个属性使用分号来分割
   导入式
   语法：
   <style type="text/css">
               @import url("demo1.css");
               </style>
   链接式与导入式区别
   1)link所有浏览器都支持部分低版本IE浏览器不支持
   2)先加载HTML文件再加载CSS样式
   3)import不支持js（javascript）动态修改

二、CSS选择器*
1.基本选择器
A.标签选择器
语法：
HTML标签{CSS样式}
案例：
<style type="text/css">
           span{
           color: red;
           font-size: 14px;
           }
           </style>
   <span>我的第一个CSS样式</span>
   B.id选择器
   语法：
   #选择器名称{CSS样式}
   案例：
   <style type="text/css">
               #d1{
               color: red;
               font-size: 14px;
               }
               #d2{
               color: yellow;
               font-size: 14px;
               }
               </style>

           <div id="d1">我的第一个CSS样式</div>
           <div id="d2">我的第一个CSS样式</div>
C.class选择器
语法：
.选择器名称{CSS样式}
案例：
<style type="text/css">
           .style1{
           background-color: red;
           }
           .style2{
           background-color: green;
           }
           </style>

           <div class="style1">我的第一个CSS样式</div>
           <div >我的第一个CSS样式</div>
           <div class="style2">我的第一个CSS样式</div>
优先级：
id选择器>class选择器>标签选择器
2.属性选择器
语法：
基本选择器[属性='属性值']{CSS样式}
案例：
<style type="text/css">
           input[type='text']{ background-color: red;}
           input[type='password']{ background-color: yellow;}
       </style>
   username:<input type="text" name="username"/><br/>
   password:<input type="password" name="password"/><br/>
   birthday:<input type="date" name="birthday"/><br/>
   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>

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

三、CSS样式*
1.字体属性
font-size:字体大小
font-family:字体字型
案例：
<style type="text/css">
       span{
       font-size: 100px;
       color: red;
       font-family: 黑体;
       font-style: italic;
       font-weight: bolder;
       }
       </style>
   <span>HELLOCSS</span>
   <em>HELLOCSS</em>
   <b>HELLOCSS</b>
   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: text; 文本 cursor: wait; cursor: help; cursor: crosshair; */
       </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") no-repeat 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>
           </head>
           <body>
           <ul>
           <li>香蕉</li>
           <li>苹果</li>
           <li>鸭梨</li>
           </ul>
           </body>
5.尺寸属性
width:宽度
height:高度
案例：
   <style type="text/css">
       #d1{
       background-color: red;
       width: 100px;
       height: 100px;
       }
       span{
       background-color: blue;
       }
       </style>

       <body>
       <div id="d1">div1</div>
       <div>div2</div>
       <span>span</span>
       </body>
6.显示属性
display
属性值：
none;不显示不占位置
block(块级显示)
inline(行级显示)
案例：
               <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-style:边框样式
border-width:边框宽度

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

border:1px 2px 3px 4x; 上右下左
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:下外边距
五、案例
div+css

菜鸟gb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css样式

一、CSS简介 1.什么CSS 层叠式样式表(Cascading Style Sheets) CSS是对HTML进行修饰的语言层叠式：层层覆盖叠加用CSS修饰HTML有优先级样式表 :CSS属性样式的集合 2.CSS作用 A.可以对HTML进行修饰使得HTML更加美观 ...
复制链接

扫一扫