HTML/CSS从零开始-常用属性(三)

一、css文本属性

(1)文本大小{font-size:value;}

单位:pt:9pt=12px;浏览器默认字体大小为16px
          em:1em=16px;
    在CSS2.0中
    xx-small:9px
     x-small:11px
       small:13px
       medium:16px
       large:19px
     x-large:23px
    xx-large:27px

(2)字体颜色

{color: rbg250,250,250/#000000/red;}

(3)文本字体{font-family:"字体1","字体2","字体三";}

浏览器按字体解读
  注意:字体名为中文时加双引号:“微软雅黑”;单个英文单词可不加:Arial;英文有空格加引号:“Times New Romen”;

(4)字体加粗{font-weight:;}

属性值:normal/500(常规);bold/600-900(加粗);bolder(更粗);

(5)文字倾斜

{font-style:itatic(斜体字)/oblique(倾斜的文字)/normal(取消倾斜)}

(6)水平对齐方式

{text-align:left/center/right/justify(两端对齐);}

(7)垂直对齐方式

{vertical-align:top/bottom/middle;}

(8)文本行高

{line-height:normal/value;}

测量行高:本行文字的顶部到下一行文字的顶部;
单行文本:行高=容器高时,垂直居中;行高<容器高时垂直偏上;

说明:font简写顺序: font-style font-weight font-size/line-height font-family;
                  {normal 600 16px "微软雅黑";}

(9)文本修饰

{text-decoration:none/underline(下划线)/overline(下划线)/line-through(添加删除线)}

扩展:<del>添加删除线</del>

(10)首行缩进

{text-indent:value;}
    value是字的个数单位为:em;
    text-indent为负值,往前退
    只对文本首行起作用

(11)字间距

{letter-spacing:value;}
控制英文字母与汉字之间的距离

扩展:{word-break:break-all;}=<br/>换行

二、边框

{border-top/bottom/right/left:1px solid/dotted/dashed/double;}

三、CSS列表属性

(1)列表符号样式

{list-style-type:disc(实心圆)/circle(空心圆)/squrare(空心方宽)/none(去掉列表符号);}
     {list-style-type:none}同等于{list-style;none;}

(2)图片作为列表符号

{list-style-image:url();}

(3)定义列表符号位置

{list-style-position:ouside/inside;}

(4)去掉列表符号

{list-style:none;}

四、背景属性

(1)背景颜色{background-color:value;}
(2)背景图片{background-image:url(路径);}
(3)背景图平铺{background-repeat:no-repeat(不平铺)/repeat(平铺)/repeat-x(水平铺)/repeat-y(垂直平铺);}
(4)背景图固定{background-attachment:scroll(滚动)/fixed(固定);}
(5)背景图位置{background-position:x y(数值:50px 50px;方向:right bottom;)}
     方向位置有:水平(left/center/right)垂直(top/center/bottom)
(6)简写:{background:url() no-repeat center top fixed  #f00;}
           {background:url() no-repeat center 100px #f00 scroll;}

五、网页常用的图片格式

(1)jpg:有损压缩 损失质量 适用颜色丰富的图像
(2)gif:有损压缩 损失色彩 支持透明、动画 适用颜色较少的图像
(3)png:损失图片色彩较少,不支持动画,支持透明,是fireworks;
说明:要求高存png,要求更高存gif,兼容时使用gif;

六、浮动(让竖立的元素横着排)

{float:left/right/none}
(1)清除浮动{clear:left/right/both;}
说明:浮动之后的元素是脱离文档流是悬浮在上面的,当你浮动元素的前面那个元素是标准流中的元素时(没有浮动)
浮动之后的元素的位置是靠浏览器的,浮动元素后面的没有浮动的元素会挤进浮动元素原来的位置。
(2)解决高度塌陷
高度塌陷:产生的条件父级元素没有写高度,子元素浮动;
解决办法:(1)在浮动元素的最后加一个空的<div></div>,给这个div写上声明div{clear:both;}
          (2)在css中给父级元素添加一个声明,div{overflow:hidden;}

七、盒模型

1、定义:网页元素如何显示以及相互关系。
 边框 边界  补白 内容区

2、padding(补白)
(1)填充:padding在设定页面中的一个元素中一个元素内容到元素的边缘(边框)之间的距离,补白;
(2)用来调整内容在容器中的位置关系
(3)用来调整子元素在父级元素中的位置
(4)padding属性加在父级元素上面
关于padding值减不减问题?
1、减:父级元素有宽高
2、不减:父级元素没有宽高;
(5)如何减?
高-(top+bottom);宽-(left+right);       
3、语法:
四个值:{padding:top right bottom left;}
一个值:{padding:20px}={padding:20px 20px 20px 20px;}
二个值:{padding:20px 30px;}={padding:20px 30px 20px 30px;}
二个值:{padding:20px 30px 40px;}={padding:20px 30px 40px 30px;}
拆分:{padding-top/right/bottom/left:value;}

2、margin
(1)边际:margin在设定页面中元素外边的空白区;
(2)margin属性加在子级元素上面     
(3)语法:
四个值:{margin:top right bottom left;}
一个值:{margin:20px}={padding:20px 20px 20px 20px;}
二个值:{margin:20px 30px;}={padding:20px 30px 20px 30px;}
二个值:{margin:20px 30px 40px;}={padding:20px 30px 40px 30px;}
拆分:{margin-top/right/bottom/left:value;}

时间: 2024-10-09 23:09:43

HTML/CSS从零开始-常用属性(三)的相关文章

CSS的常用属性

刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好坏可以直接关系到你代码书写的麻烦程度,简单来说就是CSS选择器用得好,实现相同的功能时所用到的代码就会少,这样做出来的网页代码就没有那么繁杂. 1.选择器的书写样式: 选择器中可以写多对CSS属性,用{}包裹,每个属性名与属性值之间用冒号分隔,多对属性名之间必须用分号分隔. 写法: 选择器{ 属性1

css+div常用属性备忘录

上大学学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的,不能因为在一群不学习的人中就觉得自己多厉害.其实自己也是个废物呢:) 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的,大神轻喷.很适合初学者多看看. 只做了一点微小的工作 :) 2333 float 方块-浮动 text-decoration 字体效果 letter-spacing 字母间隔 line-height 行高 text-align 区

css之常用属性

背景属性: background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动 值: scroll 默认值.背景图像会随着页面其余部分的滚动而移动. fixed 当页面的其余部分滚动时,背景图像不会移动. background-color 设置背景色 值: color_name 规定颜色值为颜色名称的背景颜色(比如 red). hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000). rgb_number 规定颜色值为 rgb 代码的背景颜色(比如

css 一些常用属性总结

在项目中经常会用到一些很实用的css代码(如有不合理的欢迎指正) css图片上下居中 /*图片上下居中代码*/ .imgvam { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; /**font-size:175px;约为高度的0.873,200*0.873 约为175*/ *font

记录css的常用属性

background-color:背景颜色 color:字体颜色 text-align:标签内容的位置 margin-left:左外边距 font-size:字体大小 font_family:字体格式 a:visited {color:yellow;}设置链接展示的颜色 a:hover {color:black;}设置鼠标放置到链接上链接的颜色 a:active {color:blue;}设置鼠标点击链接时链接的颜色 原文地址:https://www.cnblogs.com/wyhluckdog

CSS一些常用的属性,学到你就赚到了!

****CSS一些常用属性*** 0.去掉下划线 :text-decoration:none ; 1.加上下划线: text-decoration: underline; 2.调整文本和图片的位置(也就是设置元素的垂直对齐方式):vertical-align:-20px; 3.外边距:margin 4.内边距:padding 5.居中:margin 0 auto;(只是针对盒子居中) 6内联标签是不可以设置长宽的,有时候就得把内联标签变成块级标签或者块级内联标签,这就用到了display标签..

css的常用知识点

一.css的引入方式 1.行内引入 直接在标签中定义样式 <p style="background-color: red">test</p> 2.嵌入式引入 将css代码通过<style></style>标签,直接写在文件中 <head>     <meta charset="UTF-8">     <title>Title</title>     <style&g

样式常用属性

笔记信息 复习: 表单作用: 从使用的角度上说:html提供了一个输入内容的途径. 从服务器的角度:提供了一个收集信息的途径. 以便客户端和服务器进行交互. 例:注册页面,上传文件. 3种常见元素:input select textarea Input的十种常见类型: text,password,radio,checkbox,submit,reset,button,image,hidden,file Radio中name应该保持相同,以确保在单选按钮中的元素完成互斥. Checkbox中name

#8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val"] E[att*="val"] E[att|="val"] 伪对象选择符  E:first-letter/E::first-letter 设置对象内的第一个字符的样式. <p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青.远足之类的.长期坐