JavaWeb前端开发知识总结(CSS)
博客专区 > Sunmos 的博客 > 博客详情
JavaWeb前端开发知识总结(CSS)
Sunmos 发表于1年前
JavaWeb前端开发知识总结(CSS)
  • 发表于 1年前
  • 阅读 4
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

JavaWeb前端开发知识总结(CSS)

1. CSS技术

1.1 CSS概述

  • CSS 指层叠样式表 (*C*ascading *S*tyle *S*heets) .

CSS规范

引入方式:
    1.<标签 style="css属性1:属性值1;css属性2:值1 值2;..." >内容体</标签>
    2.<style> 选择器 { css代码 } </style> 3.<link rel="stylesheet" href="相对路径css文件" /> /*使用外部的css文件*/ 注意事项: 1.引入外部CSS样式时,使用<link rel="stylesheet" href="css/style.css" />,其中的rel属性不能省略; 2.div布局时使用float属性进行div的浮动排列,当一行布局结束后使用clear属性进行浮动布局的清除. 优先级:行内样式>页面样式>外部样式.

1.2 CSS选择器

元素选择器:
    标签名称{ css代码 } id选择器: #id属性值{ css代码 }
类选择器:
    .class属性值{ css代码 } 并列选择器: 选择器1,选择器2{ css代码 }
后代选择器:
    选择器1 选择器2{ css代码 } /*选择器1里面所有选择器2*/ 子元素选择器: 选择器1 > 选择器2{ css代码 }  /*选择器1里面的第一层选择器2所代表的元素*/

1.3 CSS常用属性

字体:
    大小:font-size:数字px;
    颜色:color
    字体:font-family,字体的类型
    字体粗细:font-weight:数字
对齐方式:对于文本的对齐方式,text-align:center/right/left
布局(浮动属性)float:针对块级元素(div,table)有效,使用display:inline-black,可以将行内元素转换为块元素
    float的值--left:向左浮动,使用-- float:left
    float的值--right:向右浮动,使用-- float:right
清除浮动clear:both/left/right,可以是<br clear="all" />进行清除浮动
width/height:宽度高度,只针对块级元素有效.

盒子模型:

边框border:宽度 颜色 样式;
    border:1px solid red;
    border-bottom:1px solid red;
margin:外边距
    描述:边框距离外部的
    margin: 10px; /*设置四边外边距*/
    margin:10px 5px; /*上下是10px,左右5px*/
    margin-left:5px; /*设置左外边距*/
    对于div居中:margin:0 auto;等价于margin-left:auto;margin-right:auto;
padding:内边距
    padding:10px;  /*设置四周内边距*/
    padding:10px 5px; /*上下内边距10px 左右内边距5px*/
    padding-left:5px;
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 34
码字总数 0
×
Sunmos
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: