CSS总结学习文档

最新推荐文章于 2024-05-29 09:20:13 发布

未曾远去

最新推荐文章于 2024-05-29 09:20:13 发布

阅读量450

点赞数

分类专栏： JAVA基础文章标签： CSS总结学习文档

本文链接：https://blog.csdn.net/qq_36135335/article/details/96971876

版权

JAVA基础专栏收录该内容

52 篇文章 1 订阅

订阅专栏

CSS
   为什么要使用CSS   ？
       样式表能实现内容与样式的分离，方便团队开发
       样式复用、方便网站的后期维护
       页面的精确控制，实现精美、复杂页面

   CSS的用途?
   1、外观美化
   2、布局、定位

语法：
   <head>
       <style type="text/css">       注意：类型的声明 CSS
           选择器（即修饰对象）{
           对象的属性1: 属性值1;
           对象的属性2: 属性值2;
       }
       </style>
   </head>

选择器的分类
   1.标签选择器
       标签名{

           color:red;
           background:green;

       }
   eg.
       li{
           color:red;
           font-size:28px;
           font-family:隶书;
   }

   2.类选择器
       <style type="text/css">
           .blue{color:blue;}
           ……
       </style>

类选择器优先级比标签选择器高

   3.id选择器
       <style>
           #menu{
               width:200px; background:#ccc;
               font:bold 14px 宋体;
           }
       </style>

       <div id ="menu" ></div>
优先级别：id选择器 > class类选择器 > 标签选择器

具体css优先级-->请参考

外部样式表的引用
           关联文件       路径               类型
<link rel="stylesheet" href=CSS外部文件名 type="text/css" />
       行内样式 > 内部样式 > 外部样式
       就近原则


字体、字号：
   font（缩写形式）
   font-weight（粗细）
   font-size（大小）
   font-family（字体）

行距、对齐等：
   line-height （行高）
   text-align （对齐）
   letter-spacing （字符间距）
   text-decoration （文本修饰）

背景
background （缩写形式）
background-color（背景色）
background-image（背景图）
background-repeat（背景图重复方式）
background-position（位置坐标、偏移量）

针对于<li>
属性值   方式                   语法实现               示例
none   无风格                   list-style:none;   刷牙洗脸
disc   实心圆（<ul>默认类型）   list-style:disc;       ● 刷牙 ● 洗脸
circle   空心圆                   list-style:circle;       ○ 刷牙 ○ 洗脸
square   实心正方形               list-style:square;       ■ 刷牙 ■ 洗脸
decimal   数字（<ol>默认类型）   list-style:decimal       1. 刷牙 2. 洗脸

-------------------------------------------------------------
css的布局
<div>模型
1.盒模型网页中的所有元素可以看作一个一个的“盒子”

   元素内容
   填充（也称内边距）
   边框
   边界（也称外边距）

盒子属性：
   border（边框）
   margin（外边距/边界）
   padding（内边距/填充）

margin
margin-top
margin-right
margin-bottom
margin-left

eg.
   margin：1px 2px 3px 4px; （上，右，下，左）(顺序以人为基准)(顺时针)

   padding: 10px 50px;

   属性值 auto 指左右居中上下置顶

注意：如果两个属性上、左
   用空格间隔

border属性
   border-color
   border-width
   border-style

元素的实际占位（实际宽、高）
   盒子高度 = height属性 + 上下填充高度 + 上下边框高度
   盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度

body {
margin:100px;       //指<body>对浏览器上边框的距离
   padding:100px;   //距离<body>的上边框的距离
background:#ccc;
}

浮动的三大显著特征
   1.DIV块元素失去“块状”换行显示特征，变为行内元素就是失去了前后换行
   2.紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示
   3.占据行内元素的空间，导致行内元素围绕显示

float right/left 漂浮

clear both/right/left 对应左右不漂浮

超链接伪类样式
四个伪类样式(建议使用)
a:link{color: #FF0000;/*未访问超链接时字体的颜色为红色*/}

a:visited{color: #60C5F1;/*已访问超链接时字体的颜色为蓝色*/}

a:hover{color: #FFF766;/*鼠标移动到超链接上时字体的颜色为黄色*/}

a:active{color: #22B14C;/*鼠标移动到超链接上并按下时（激活选定状态）字体的颜色为绿色*/}

ä¼ªç±»çå±æ§

CSS 伪类、伪元素、超链接伪类样式<--学习
三类应用样式的方式
行内样式           只作用于本标签
内部样式表            只作用于本页面
外部样式表            作用于各网页

各类样式的优先级
浏览器默认设置 <外部样式表文件 <内部样式表 <行内样式表
（就近原则：同级别样式选择就近样式）

布局：
   div-ul(ol)-li：常用于分类导航或菜单等场合；
   div-dl-dt-dd：常用于图文混编场合；
   table-tr-td：常用于图文布局或显示数据的场合；       展示
   form-table-tr-td：常用于布局表单的场合；           提交数据

实现步骤
   先建立HTML标签组织结构
   建立CSS样式表，逐一添加各类样式
   测试样式细节

未曾远去

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS总结学习文档

CSS 为什么要使用CSS ？样式表能实现内容与样式的分离，方便团队开发样式复用、方便网站的后期维护页面的精确控制，实现精美、复杂页面 CSS的用途? 1、外观美化 2、布局、定位语法： <head> <style type="text/css">...
复制链接

扫一扫

专栏目录