怎么不花钱建立网站,网站建设亿金手指花总12,中国建设银行总行官方网站,用第三方做网站在上篇文章我们知道了利用css选择器来对HTML进行简单装饰#xff0c;就像做word文档一样#xff0c;需要对哪一段落修改格式#xff0c;就需要先选中#xff0c;css选择器就是这意思。这格式如何修改#xff0c;怎么放大字体#xff0c;怎么加粗#xff0c;怎么修改背景…在上篇文章我们知道了利用css选择器来对HTML进行简单装饰就像做word文档一样需要对哪一段落修改格式就需要先选中css选择器就是这意思。这格式如何修改怎么放大字体怎么加粗怎么修改背景色等等就需要知道我们继续熟悉css有哪些常用的属性了。
css常用属性
1.文本属性
color 字体颜色 p { color :red; } 或者 p { color : #ff0000;} //属性值可以是英文单词也可以是颜色的十六进制代码line-height行高。 取值为数值、单位或百分比text-align 文本行内文的本水平对齐方式。取值为left、right 、 center、justifyvertical-align 文本行内的文本垂直对齐方式。取值为baseline、top、middle、bottomtext-indent文本的首行缩进。取值为px、em 等text-decoration文本装饰线。
text-decorationunderline | line-through | overline | none下划线 | 删除线 | 上划线 | 无装饰线word-spacing单词间距。与letter-spacing类似但作用于单词之间所以只对英文有效white-space空白的处理方式。文本超出后是否换行。取值nowrap以防止文本换行font-size字体大小。 值为 绝对单位如px、pt或相对单位如em、rem、%font-weight字体粗细。值为 关键字normal、bold等或数值100到900font-style字体风格。 值为 normal普通 | italic斜体font-family字体系列。可指定多个字体名称以逗号分隔浏览器将使用第一个可用的字体。如 微软雅黑宋体…等但需要系统已安装font简写属性font : font-style | font-weight | font-size | font-family。必需按顺序写
2.盒子模型属性
width:宽度 width100px|80%|auto;height:高度 height: 100px | 80% | auto;margin:外边距 margin:上 右 下 左padding:内边距 padding: 上 右 下 左
3.定位属性
static 默认定位。按照常规文档流进行显示relative 相对定位。通过left,bottom…等来设置相对自己的偏移但元素所占空间保留在原 位不会被挤占 不会影响正常文档流通常用来用作包含元素。absolute 绝对定位。通过left,bottom…等来设置相对包含元素(除static的父级元素)的偏移 。元素所在空间会被挤占而其本身则会覆盖在其他元素上方会将元素移除正常的文档流 。fixed 固定定位。通过left,bottom…等来将元素相对于浏览器窗口即包含元素为浏览器窗口固定会使元素脱离正常文档流 。适合用来固定导航。sticky 半固定定位。类似于fixed和relative的结合 通过left,bottom…等来相对于浏览器窗口固定但无论怎么滑动窗口元素位置都会相对于视窗固定而其他元素属于正常文档流z-index 控制元素堆叠顺序。设置z轴偏移取值为数字值越大越靠近屏幕默认为0。注意只能给非static定位的元素设置z-index属性
4. 背景属性
background-color 设置元素背景颜色background-image 设置元素背景图像可以是URL或CSS渐变background-repeat 控制背景图像的重复方式 background-repeat: repeat | repeat-x | repeat-y | no-repeat;水平/垂直方向都重复默认值 | 仅水平重复 | 仅垂直重复 | 不重复background-position设置背景图像的起始位置 background-position: top | bottom | left | right | center | 精确的位置值px、可同时选两个值用以描述背景图的起始位置。如left bottom 位于左下background-attachment控制背景图像是否随页面滚动 background-attachment: scroll | fixed | local;scroll 背景图随页面的其余部分滚动默认值fixed 背景图相对视口固定即使页面滚动它也不会移动local 背景图相对元素内容区域固定当元素有滚动条并滚动时背景图随内容一起滚动background-size指定背景图像的大小
background-size: cover | contain | 具体尺寸;cover 背景图完全覆盖可能会被裁剪以适合contain 背景图像完全适应可能会被拉伸或压缩以适合具体尺寸如100px 100px或百分比如50% 50%background简写属性允许你在一个声明中设置上述所有背景属性。
5. 边框属性
border-style定义边框样式
.box {border-style:;none 无边框。solid 实线边框。dashed虚线边框由一系列短线段组成。dotted点线边框由一系列点组成。double双线边框由两条并排的实线组成。groove凹槽边框带有3D凹槽效果。ridge 凸起边框带有3D凸起效果。inset 内嵌边框带有3D内嵌效果。outset外凸边框带有3D外凸效果。
}border-width设置边框的粗细。通常是具体的像素值如2pxborder-color设置边框的颜色。十六进制值RGB值RGBA值或transparent值等border简写属性允许同时设置边框的宽度、样式和颜色。语法“border: 宽度 样式 颜色;” border: 2px solid red;单独设置各边边框。border-top、border-right、border-bottom和border-left。border-radius设置元素四角的圆角半径创建出更加平滑和美观的边框效果
border-radius: length | %;length定义圆角的大小可以是像素px、em、rem等单位%表示圆角的大小是相对于元素尺寸的百分比。border-image使用图像作为边框可以指定边框图像的路径、切片、宽度、偏移量和重复方式。是border-image-source、border-image-slice、border-image-width、border-image-outset和border-image-repeat属性的简写形式。如下
border-image: source slice / width / outset repeat;source图像路径URL | CSS渐变
slice 图像开始分割的位置分9个区域上、右、下、左以及四个角px | % | fill关键字
width 图像宽度数值 | % | auto。默认为1图像宽度等于边框宽度
outset图像外延尺寸边框图像区域超出边框盒子的距离
repeat图像平铺方式stretch拉伸 |repeat重复 |round重复并尽可能完整地显示图像|space重复并均匀分布空白6. 列表属性
list-style-type设置列表前的标记
/*此时不再区分有序列表还是无序列表只要设置列表前的标记就可以了*/
ul {list-style: disc 实心圆点无序列表默认circle 空心圆square 方块none 无标记decimal 数字有序列表默认upper-roman 大写罗马数字lower-roman 小写罗马数字upper-alpha 大写字母lower-alpha 小写字母
}list-style-image用图像作为列表项的标记。值为URLlist-style-position设置列表项标记的位置。list-style简写属性。如 { list-style: square inside url(‘bullet.png’);
7.其他属性
浮动 float :通过float属性来实现元素的浮动可以让块级元素脱离常规的文档流向左或向右移动在同一行显示如果一行显示不下则会换行显示。
float属性主要用于布局设计如创建多栏布局、导航菜单或实现文本环绕图像的效果。
div{float: left | right | none ;左浮动 | 右浮动 | 不浮动默认
} 浮动的坏处——父元素高度塌陷
当容器内的子元素都设置为浮动时这些子元素会脱离文档流不再占据原本的空间。这会导致父容器无法被撑开其高度可能会塌陷为0除非显式地设置了父容器的高度。
清除浮动 由于高度塌可能会造成页面布局混乱因此常常需要清除浮动。 伪元素clearfix为父元素上添加一个伪元素如::after并设置其样式来清除浮动好用且无副作用。
父元素::after {content: ;display: block;clear: both;
}table属性
table常用样式的属性
border在表格外围设置边框 border-collapse表格中相邻边框是否合并取值seprate、collapse border-spacing设置单元格之间的距离。当相邻边框合并时不起作用。 th/td常用样式属性
border为单元格设置边框 padding设置单元格的内边距相当于table标签中的cellpadding属性边距
内容/文本超出
overflow 处理元素超出指定大小时的内容。不可用于行内元素其大小仅由内容决定
visible 默认值内容不裁剪会渲染在元素框之外。 hidden 超出部分的内容会被裁剪并隐藏。 scroll 超出部分被裁剪但有滚动条以便查看其内容。无论是否出现溢出始终出现滚动条 auto 和sroll作用相同但auto只会在内容溢出时才会出现滚动条。
text-overflow 指定当文本溢出时应该做什么但并不会改变文本的布局或溢出行为通常与overflow: hidden;一起使用且只对块级元素或设置了固定宽度的元素有效
clip默认值将溢出的文本裁剪掉不显示任何内容 ellipsis表示在溢出的文本末尾显示省略号… 先列这么多常用的属性吧专栏后面的网页编程实战中用到更多的css属性可以边看边了解。若有帮助愿一键三连以表支持若有错误或描述不当烦请评论留言或私信指正
