边框背景 | 易学教程

前端——css（下）

阅读更多关于前端——css（下）

CSS属性相关宽和高 width 属性可以为元素设置宽度。 height 属性可以为元素设置高度。 ==块级标签才能设置宽度，内联标签的宽度由内容来决定== 字体属性文字字体 font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 字体大小 p { font-size: 14px; } 如果设置成inherit表示继承父元素的字体大小值。字重（粗细） font-weight 用来设置字体的字重（粗细）。值描述 normal 默认值，标准粗细 bold 粗体 bolder 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值文本颜色颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：十六进制值 - 如: ＃ FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。文字对齐

day52

阅读更多关于 day52

CSS补充文字对齐 text-align属性规定元素中文本的水平对齐方式 left: 左边对齐默认值 right: 右对齐 center: 居中对齐 justify: 两端对齐文字装饰 text-decoration属性用来给文字添加特殊效果 none：默认，定义标准的文本 underline: 定义文本下的一条线 overline: 定义文本上的一条线 line-through: 穿过文本的一条线 inherit: 继承父元素的text-decoration属性的值背景属性背景颜色 background-color: red; 背景图片 background-image: usl('1.jpg'); 背景重复 repeat(默认)：背景图片平铺排满整个网页 repeat-x: 背景图片只在水平方向上平铺 repeat-y: 在垂直方向上平铺 no-repeat: 背景图片不平铺 background-repeat: no-repeat/left top; #背景位置支持简写 background: #336699 url('1.png') no-repeat left top; 边框边框属性 border-width border-style border-color 边框样式 none: 无边框 dotted: 点状虚线边框 dashed: 矩形虚线边框

前端之CSS

阅读更多关于前端之CSS

目录 CSS 介绍 CSS语法引用方法基本选择器 4 | 2组合选择器后代选择器儿子选择器毗邻选择器弟弟选择器属性选择器分组和嵌套伪类选择器伪元素选择器选择器的优先级 CSS属性相关宽和高字体属性文字属性文字之间的距离背景属性边框 border-radius display属性 CSS盒子模型 margin外边距 padding内填充 float clear overflow溢出属性定位（position）是否脱离文档流 z-index opacity CSS 介绍 CSS(Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一张样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法引用方法行内样式行内样式是在标记的style属性中设定CSS样式。（不推荐大规模使用） <p style="color=red">hello world</p> 内部样式内部样式是将CSS样式集中写在网页的 <head></head> 标签中的 <style></style> 标签中。 <head> <meta charset="utf-8"> <title>Title</title> <style> p{ background-color:red; } </style> </head> 外部样式

前端CSS

阅读更多关于前端CSS

前端CSS CSS介绍 CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法 CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 CSS注释 /*这是注释*/ 注释是代码之母。 CSS的几种引入方式行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> CSS选择器基本选择器元素选择器 p {color: "red";} ID选择器 #i1

002 前端基础之CSS

阅读更多关于 002 前端基础之CSS

目录一、CSS介绍二、CSS语法 2.1 CSS实例 2.2 CSS注释三、CSS的几种引入方式 3.1 行内样式(内联样式) 3.2 内部样式 3.3 外部样式四、CSS选择器 4.1 基本选择器元素选择器 ID选择器类选择器通用选择器 4.2 组合选择器后代选择器儿子选择器毗邻选择器兄弟选择器 4.3 属性选择器 4.4 分组和嵌套分组嵌套 4.5 伪类选择器 4.6 伪元素选择器 first-letter before after 4.7 选择器的优先级 CSS继承选择器的优先级五、CSS属性相关 5.1 宽和高 5.2 字体属性文字字体字体大小字重（粗细）文本颜色 5.3 文字属性文字对齐文字装饰首行缩进文字之间的距离 5.4 背景属性 5.5 边框 5.6 border-radius 5.7 display属性 5.8 CSS盒子模型 5.9 margin外边距 5.10 padding内填充 4.11 float浮动三种取值 5.12 clear清除浮动清除浮动 5.13 overflow溢出属性 5.14 定位（position） static relative（相对定位） absolute（绝对定位） fixed（固定）脱离文档流：不脱离文档流： 5.15 z-index 5.16 opacity 六、综合案例

CSS样式属性

阅读更多关于 CSS样式属性

CSS样式属性一、宽和高 width属性可以为元素设置宽度。 height属性可以为元素设置高度。块级标签才能设置宽度，内联标签的宽度由内容来决定。二、字体属性 2.1文字字体 font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 2.2字体大小 p { font-size: 14px; } 如果设置成inherit表示继承父元素的字体大小值。 2.2 字重（粗细） font-weight用来设置字体的字重（粗细）。值描述 normal 标准粗细 bold 粗体 bolder 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值,默认值， 2.3文本颜色颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：十六进制值 - 如: ＃ FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1

CSS

阅读更多关于 CSS

CSS语法 CSS样式由两个部分组成:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS注释 /*这个是注释*/ CSS的几种引入方式 1. 行内样式行内式是在标记的style属性中设定CSS样式,不推荐大规模使用. <p style="color:red">你好!</p> 2.内部样式内部样式,也就是嵌入式是将CSS样式集中写在网页的标签中标签中. <head> <meta charset="UTF-8"> <title>标题</title> <style> p { background-color: #2b99ff; } </style> </head> 3.外部样式外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可.推荐使用 <link href="样式名.css" rel="stylesheet" type="text/css/"/> # 引入语句 CSS选择器基本选择器 /*元素选择器*/ p {color:red;} /*ID选择器*/ #id {background-color:red;} /*类选择器*/ .class {font-size: 15px;} /*通用选择器*/ * {color:red;} @注意: 样式类名不要用数字开头(有的浏览器不认识). 标签中的class属性如果有多个,要用空格分隔. 组合选择器

CSS盒模型及应用

阅读更多关于 CSS盒模型及应用

其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。看透网页布局的本质网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？牛奶是怎样运输，让消费者购买的呢？我们说过，行内元素比如文字类似牛奶，也需要一个盒子把他们装起来，我们前面学过的双标签都是一个盒子。有了盒子，我们就可以随意的，自由的，摆放位置了。看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。CSS 其实没有太多逻辑可言，类似我们小时候玩的积木,我们可以自由的，随意的摆放出我们想要的效果。盒子模型（Box Model）这里略过老旧的ie盒子模型（IE6以下），对不起，我都没见过IE5的浏览器。首先，我们来看一张图，来体会下什么是盒子模型。所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。盒子边框（border）

前端之CSS

阅读更多关于前端之CSS

文本属性 ## 文字对齐 #text-align属性规定元素中文本的水平对齐方式 left: 左边对齐默认值 right: 右对齐 center: 居中对齐 justify: 两端对齐 ## 文字装饰 #text-decoration属性用来给文字添加特殊效果 none：默认，定义标准的文本 underline: 定义文本下的一条线 overline: 定义文本上的一条线 line-through: 穿过文本的一条线 inherit: 继承父元素的text-decoration属性的值背景属性 #背景颜色 background-color: red; #背景图片 background-image: usl('1.jpg'); #背景重复 repeat(默认)：背景图片平铺排满整个网页 repeat-x: 背景图片只在水平方向上平铺 repeat-y: 在垂直方向上平铺 no-repeat: 背景图片不平铺 background-repeat: no-repeat/left top; #背景位置 # 支持简写 background: #336699 url('1.png') no-repeat left top; 边框 #边框属性 border-width border-style border-color #边框样式 none: 无边框 dotted: 点状虚线边框

前端知道之css

阅读更多关于前端知道之css

css的几种引入方式行内样式行内式是在标记的style属性中设定css样式，不推荐大规模使用 <p style='color:red'>hello world</p> 内部样式嵌入式将css样式集中写在网页的<head></head>标签对中 <head> <meta charset='utf-8'> <title>title</title> <style> p{ background-color:white;} } </style> </head> 外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可 <link href="mystyle.css" rel="stylesheet"type="text/css"> css选择器基本选择器元素选择器：p{color：“red”;} id选择器：#i1{background-color:red;} class选择器：.c1{font-size:14px} p.c1{ color:red; } 注意：样式类名不要用数字开头（有的浏览器不认）标签中的class属性如果有多个，要用空格分隔通用选择器 *{color:while;} 组合选择器后代选择器：li a{color:green;} #li内部的a标签设置字体颜色 #选择所有父集是<div>元素的<p>元素儿子选择器：div>p

订阅边框背景