web前端(9)—— CSS属性

属性

终于到css属性,前面就零零散散的用了什么color,font-size之类,本篇博文就专项的介绍它了

字体属性

font-family

此属性是设置字体样式的,比如微软雅黑,方正书体,华文宋体之类的

例,给body标签设置字体:

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

  

可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值

font-weight

字重,即设置字体的粗细

取值有以下:

描述
normal 默认值,标准粗细
bord 粗体
border 更粗
lighter 更细
100~900 设置具体粗细,400等同于normal,而700等同于bold
inherit 继承父元素字体的粗细值

font-size

这个前面也用到过了,就是设置字体大小的

例:

p {
  font-size: 14px;
}

color

设置字体颜色,前面也用过了

例:

p{
  color:red;
}

 

支持三种颜色值:

  • 十六进制值 如: #FF0000
  • 一个RGB值 如: RGB(255,0,0)
  • 颜色的名称 如: red,blue,black,white(颜色的英文单词)

 

文字属性

text-align

设置文本的水平方向的对齐方式,其值有:

描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐

例:

p{
  text-align:center;
}

 

line-height

即行高,文本垂直方向的占位,其值为像素大小

例:

p{
  line-height:20px
}

text-decoration

文字装饰,其值有:

描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值

例:

a{
  text-decoration:none;/*表示a标签无下划线*/
}

text-index

设置文本缩进,其值为像素单位

例:

p{
  text-index:2px;  /*表示缩进两个像素位置*/
}

  

背景属性

背景属性就很多了,不过不用死记:

background-color

要使用的背景颜色,其值和前面的color属性的值相同

例:

body{
  backgroud-color:red;
} 

background-image

要使用的背景图像

例:

body{
  background-image: url(xx.png);
}

background-size

背景图片的尺寸

例:

body{
  background-image: url(xx.png);
  background-size:200px;
}

background-repeat

如何重复背景图像,当设置了背景图片的尺寸后,如果尺寸并不能刚好放下图片,就会产生拉伸或者平铺等效果

描述
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承background-repeat属性的设置

例:

body{
  background-image: url(xx.png);
  background-size:200px;
  background-repeat:no-repeat;
}

  

background-attachment

背景图像是否固定或者随着页面的其余部分滚动,其值有如下:

描述
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时,背景图像不会移动。
inherit 规定应该从父元素继承background-attachment属性的设置

例:

body{
  background-image: url(xx.png);
  background-size:200px;
  background-repeat:no-repeat;
  background-attachment:scroll
}

  

background-position

背景图像的位置,其值为如下:

描述
top left 
top center 
top right 
center left 
center center 
center right 
bottom left 
bottom center 
bottom right
如果只设置了一个关键词,那么第二个值就是"center"。
默认值:0% 0%。
x% y% 第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果只设置了一个值,另一个值就是50%。
xpos ypos 第一个值是水平位置,第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果只设置了一个值,另一个值就是50%。
可以混合使用%position值。

inherit

表示应该从父元素继承background属性的设置,这个很少用

以上背景属性综合使用:

body {
  background-color: blue;
  backgraound-image: url(xx.png);
  background-size: 200px 250px;
  background-repeat: no-repeat;
  background-position: center
}

  

当然,也可以简写成这样:

body {
  background: red url(xx.png) no-repeat fixed center/200px 250px;
}

  

display属性

在前面学html标签时,我们就学过行内标签,块级标签,行内块级标签,而控制这些标签相互转换的就是这个display属性

先说下行内和块级标签的概念:

行内元素的特性

  • 与其他行内元素并排;
  • 不能设置宽、高。默认的宽度,就是文字的宽度,可以使用line-height设置垂直方向的占比

块级元素的特性

  • 霸占一行,不能与其他任何元素并列;
  • 能接受宽、高。如果不设置宽度,那么宽度将默认变为父亲的100%

块级元素和行内元素的分类:

在以前的HTML知识中,我们已经将标签分过类,当时分为了:文本级、容器级。

从HTML的角度来讲,标签分为:

  • 文本级标签:p、span、a、b、i、u、em。
  • 容器级标签:div、h系列、li、dt、dd。

  PS:为甚么说p是文本级标签呢?因为p里面只能放文字&图片&表单元素,p里面不能放h和ul,p里面也不能放p。

从CSS的角度讲,CSS的分类和上面的很像,就p的不一样:

  • 行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级,但是是个块级元素。
  • 块级元素:所有的容器级标签都是块级元素,还有p标签

转换:

块级转为行内,之前的特性丢失:

div{
  display:inline;
}

之后会拥有行内标签的特性:

  • 此时这个div不能设置宽度、高度;
  • 此时这个div可以和别人并排了

行内转为块级,之前的特性丢失:

span{
  display:block;}

  

之后会拥有行内标签的特性:

  • 此时这个span能够设置宽度、高度
  • 此时这个span必须霸占一行了,别人无法和他并排
  • 如果不设置宽度,将撑满父级html元素

盒模型

盒模型说白了就是以div标签为代表的这种块级标签的模型,在html5和css3里还有很多类似div的标签,用到的额时候再说吧

在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型

盒模型有两种:标准模型和IE模型

如果朋友您还是没太懂,这样,我们还是以百度首页为例:

我选中了id为head的div,然后右边的css样式的最下面有个这个图形,它这就是一个盒模型的样子。相信你已经注意到里面的margin和padding之类的字眼了,接下来就开始介绍它们

margin

即外边距的意思,表示边框到最近盒子的距离,(比如两个div之间)

margin-top,margin-left,margin-right,margin-bottom分别表示距离上左右下的距离

例:

div{
  margin: 20px; /*表示四个方向的外边距离为20px*/
  margin-top: 30px;/*表示盒子距离上边30px*/
  margin-left: 50px;/*表示盒子距离右边50px*/
  margin-bottom: 100px;/*表示盒子距离下边100px*/
}

  

padding

即内边距的意思,表示盒子内部内容距离盒子边框的距离

同样,padding也有padding-top,padding-left,padding-right,padding-bottom四个小属性,表示距离也分别是上左右下的

分别写:

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

简写:

上下左右
*/
padding: 20px;

/*还有其他的简写写法:*/
/*
上 右 下 左
*/

padding: 20px 30px 40px 50px ;

/*
上 左右  下
*/

padding: 20px 30px 40px;

/*
 上下 左右
*/

padding: 20px 30px;

/*

  

根据以上的话,相信你之前或许看到过这种:

*{
  padding:0;
  margin:0;
}

  

那么这个就好理解了,就是对通用选择器进行内外边距的控制,因为很多html标签是有一些默认的样式的,所以我们需要重新设置下

盒模型的其他属性

width:内容的宽度

height: 内容的高度

left:左边距

right:右边距

top:上边距

bottom:下边距

盒模型的计算

盒子的真实宽度=width+2*padding+2*border

盒子的真实宽度=height+2*padding+2*border

还有因为html标签嵌套的关系,子元素会继承父元素的css样式,所以宽度高度等都有不同的像素单位

假如一个大div的样式如下:

width:1000px;

这个大div内还有一个小div,其样式为:

width:80%

那么这个小div宽度是多少呢?

我们知道,默认的话,80%就是屏幕的宽度的80%对吧,但是由于其外层还有一个大的div,且大的div已经设置了宽度为1000px,那么这个小div的实际width其实是1000px乘以80%=800px

border

即边框的意思,描述盒子的边框。边框有三个要素: 粗细(像素单位) 线性样式 颜色(color值)

线性样式也有小属性:

  • solid(实线)
  • dashed(虚线)
  • double(双实线)

border也有同margin和padding一样的上下左右四个小属性

例:

border-width: 3px;
border-style: solid;
border-color: red;

/*

border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;

*/

  

清除边框的默认样式:

border:none;
border:0;

  

例:使用border设置出一个小三角形

/*小三角 箭头指向下方*/
div{
    width: 0;
    height: 0;
    border-bottom: 20px solid red;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
     }

  

原文地址:https://www.cnblogs.com/yangva/p/9959003.html

时间: 2024-10-09 08:21:59

web前端(9)—— CSS属性的相关文章

好程序员web前端分享css常用属性缩写

好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1; property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 pr

好程序员web前端分享CSS文件引用的最优方法

好程序员web前端分享CSS文件引用的最优方法,在html总引入css文件的方法: 1链接式: 2导入式: 区别: 使用链接式时,会在加载页面主体部分之前加载css文件,这样现实出来的页面一开始就是带有样式效果的,而使用导入式时,会在整个页面装载完成之后再装载css文件,对于有的浏览器来说,在一些情况下,如果页面文件的体积比较大,则会出现先现实无样式的页面,闪烁一下之后再出现设置样式的效果.从浏览者的感受来说,这是使用导入式的一个缺陷.** 链接式比导入式快. 当有多个文件链接到页面的时候会导致

1+x 证书 Web 前端开发 css 专项练习

官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/ 原文地址:https://www.cnblogs.com/zhsh666/p/11967944.html

Web前端--Html/Css

总结一下今天学的内容,虽然以前学过,但是再学感觉还是有需要学习的地方. Web前端–Html: 超文本标记语言(HyperText Markup Language) 1.整体骨架 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> </body> </ht

前端学习 -- Css -- 属性选择器

属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]:选取属性值以指定内容开头的元素 [属性名$="属性值"]:选取属性值以指定内容结尾的元素 [属性名*="属性值"]:选取属性值中包含指定内容的元素 demo:(注:这么尴尬的诗句肯定不是我写的) <!DOCTYPE html> <html> &l

前端开发--css属性书写顺序

css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; float: ; clear: ; /*定位属性*/ position: ; top: ; right: ; bottom: ; left: ; z-index: ; /*盒模型属性*/ width: ; min-width: ; max-width: ; height: ; min-height

前端之CSS属性相关

目录 CSS属性相关 CSS属性相关 宽度和高度 width:设置元素的宽度 height设置元素的高度 注意:只有会计标签才能设置宽度,内联标签的宽度有内容来决定 <style> div { height: 50px; width: 100px; } /*给行内标签设置长宽没有任何影响*/ span { height: 50px; width: 100px; </style> 字体属性 1) 文字字体 font-family可以把多个字体名称作为一个"回退"系

web前端开发——css

一.css介绍 1.css是什么? Cascading Style Sheets缩写,层叠样式表.样式定义如何显示HTML元素,样式通常又会存在于样式表中. 2.为什么需要css? 使HTML页面变得美观: 将HTML页面的内容与样式分离: 提高web开发的工作效率. 3.css的优势 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使页面布局更加灵活 减少网页的代码量,增加网页浏览器速度,节省网络带宽 运用独立页面的css,有利于网页被搜索引擎收录 二.css语法 css语法分为两部分:

[Web 前端] 019 css 定位之绝对定位与相对定位

1. 关于定位 我们可以使用 css 的 position 属性来设置元素的定位类型 postion 的设置项如下 设置项 释义 relative 生成相对定位元素元素所占据的文档流的位置不变元素本身相对文档流的位置进行偏移 absolute 生成绝对定位元素元素脱离文档流不占据文档流的位置可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位如果找不到,则相对于 body 元素进行定位 fixed 生成固定定位元素元素脱离文档流不占据文档流的位置可以理解为

[Web 前端] 018 css 清除浮动的四种方法

清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both(不推荐)(见例2.2) 使用成熟的清浮动样式类 clearfix(见例3) 少废话,上例子 例 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test