h5制作网站哪个好,app与网站的关系,修改公司网站,如何使用花生壳做网站#x1f680; 个人主页 极客小俊 ✍#x1f3fb; 作者简介#xff1a;web开发者、设计师、技术分享 #x1f40b; 希望大家多多支持, 我们一起学习和进步#xff01; #x1f3c5; 欢迎评论 ❤️点赞#x1f4ac;评论 #x1f4c2;收藏 #x1f4c2;加关注 CSS常用属性… 个人主页 极客小俊 ✍ 作者简介web开发者、设计师、技术分享 希望大家多多支持, 我们一起学习和进步 欢迎评论 ❤️点赞评论 收藏 加关注 CSS常用属性
使用CSS基本上能够处理的属性有背景、文本、字体,边框、内边距、外边距,列表、表格、尺寸,定位、分类、伪类!
对于新手而言我个人从里面挑选了一些最常用的CSS属性大家可以先学习熟练之后再去深入学习其他的CSS属性!
CSS 背景background
该属性定义元素的背景效果。 元素的背景区包括前景之下直到边框边界的所有空间。因此内容框与内边距都是元素背景的一部分且边框画在背景上。 CSS 允许应用纯色作为背景也允许使用背景图像创建相当复杂的效果,具体有如下:
Background 简写属性
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置
background-repeat 设置背景图像是否平铺及如何平铺。CSS 文本
使用文本属性你可以改变文本的颜色增加或减少文本中的字符间距对齐文本装饰文本对文本中的首行进行缩进等。 具体有如下属性:
Color 设置文本颜色
Direction 设置文本方向。
line-height 设置行高。(一般只作用于文字)
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-transform 处理文本的大小写。
letter-spacing 设置字符(字母)间距。
word-spacing 设置词(词组)间距。text-indent 一般来说可以为所有块级元素应用 text-indent但无法将该属性应用于
行内元素图像之类的替换元素上也无法应用 text-indent 属性。不过如果
一块级元素比如段落的首行中有一个图像它会随该行的其余文本移动。white-space 当 white-space 属性设置为 normal 时会合并所有的空白符并忽略换
行符.当 white-space 属性设置为 pre 时浏览器不会合并空白符也不会忽
略换行符.值是 nowrap它会防止元素中的文本换行除非使用了一个 br 元
素如果元素的 white-space 设置为 pre-wrap那么该元素中的文本会保留空
白符序列但是文本行会正常地换行。如果设置为这个值源文本中的行分隔
符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反会像正常文本
中一样合并空白符序列但保留换行符。CSS 字体font
CSS 字体属性允许您设置字体系列 (font-family) 和字体加粗 (font-weight)我们还可以设置字体的大小、字体风格如斜体和字体变形如小型大写字母
具体有如下属性:
Font 简写属性
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-style 设置字体风格。
font-variant 以小型小写字体或者正常字体显示文本。
font-weight 设置字体的粗细CSS 边框(border)
CSS边框属性可以规定元素边框的粗细、样式和颜色。 具体如下: border 简写属性border-style 用于设置元素所有边框的样式或者单独地为各边设置边框样式。border-width 用于为元素的所有边框设置宽度或者 单独地为各边边框设置宽度。border-color 设置元素的所有边框中可见部分的颜色或为 4 个边分别设置颜色。 Top(上) right(右) bottom(下) left(左)CSS 外边距(margin)
CSS外边距属性定义元素周围的空间,设置外边距会在元素外创建额外的“空白”。“空白”通常指不能放其它元素的区域而且在这个区域中看得到父元素的背景。
例如: h1 {margin : 10px 0px 15px 5px;}
这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的margin: top right bottom left
具体如下: margin 简写属性margin-bottom 设置元素的下外边距。margin-left 设置元素的左外边距。margin-right 设置元素的右外边距。margin-top 设置元素的上外边距。 CSS 内边距(padding)
CSS 内边距属性定义元素边框与元素内容之间的空白 。 例如 td {padding : 2px 2px 2px 2px;}
具体如下:
Padding 简写属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。CSS 列表
CSS 列表属性可以放置、改变列表项标志或者将图像作为列表项标志 。
使用方式如下属性:
list-style 简写属性。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。CSS 表格
CSS 表格属性允许你设置表格的布局。
使用方式如下属性:
border-collapse: 设置是否把表格边框合并为单一的边框。
border-spacing : 设置分隔单元格边框的距离。
empty-cells : 设置是否显示表格中的空单元格。
caption-side: 设置表格标题的位置。
table-layout : 设置显示单元、行和列的算法CSS 尺寸(Dimension)
CSS 尺寸(Dimension)属性可以控制元素的高度和宽度及行间距。(单位为px)
常见的使用方式如下属性:
Height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
Width 设置元素的宽度。CSS 分类(Classification)
CSS 分类属性可以规定如何以及在何处显示元素, 这一块里面的属性几乎是CSS布局的核心
常见的使用方式如下属性:
Clear 设置一个元素的侧面是否允许其他的浮动元素。
Cursor 规定当指向某元素之上时显示的指针类型。
Display 设置是否及如何显示元素。
Float 定义元素在哪个方向浮动。
Position 把元素放置到一个静态的、相对的、绝对的、或 固定的位置中。
Visibility设置元素是否可见或不可见。Display 的属性值:如下
None 此元素不会被显示。
Block 此元素将显示为块级元素此元素 前后会带有换行符。
Inline 默认。此元素会被显示为内联元素 元素前后没有换行符。
inline-block 行内块元素。块元素默认独占一行的元素。例如DIV、TABLE、PRE、H1..H6、UL、LI、OL、FORM等元素。 特点 1独占一行 2可以设置宽、高
内联元素行内元素默认不独占一行的元素它们可以放在一起。 例如FONT、A、SPAN、INPUT、IMG等… 特点 1不独占一行 2宽度跟高度不可以控制。
块元素转换成行内元素display:inline 行内元素转换成块元素display:block
CSS浮动属性
Float 属性,用于让元素脱离文档流进行浮动, 它的属性值如下: left 文本或图像会移至父元素中的左侧。right 文本或图像会移至父元素中的右侧。none 默认。文本或图像会显示于它在文档中出现的位置。clear 清除浮动元素属性, 它的可选值如下:
Left 在左侧不允许浮动元素
Right 在右侧不允许浮动元素
Both 在左右两侧均不允许浮动元素
None 默认。允许浮动元素出现在两侧。float属性是个重点, 在 CSS 中任何元素都可以浮动。 浮动元素会生成一个块级框而不论它本身是何种元素, 且要指明一个宽度否则它会尽可能地窄, 另外当可供浮动的空间小于浮动元素时它会跑到下一行直到拥有足够放下它的空间。
visibility 属性
visibility 属性设置元素是否可见或不可见。 即使不可见的元素也会占据页面上的空间。
如果不可见元素不占据页面空间则用display来控制 它们之间的区别: Visible 元素是可见的, Hidden 元素是不可见的。
CSS 定位(Positioning)
CSS 定位(Positioning)是我们在布局中经常会使用到的一个属性!
我们主要使用的定位属性有以下这几种:
absolute 生成绝对定位的元素相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 left, top, right 以及 bottom 属性进行规定。fixed 生成绝对定位的元素相对于浏览器窗口进行定位。
元素的位置通过 left, top, right 以及 bottom 属性进行规定。relative 生成相对定位的元素相对于其正常位置进行定位。
因此left:20 会向元素的 LEFT 位置添加 20 像素。static 默认值。没有定位元素出现在正常的流中忽略 top, bottom, left, right 或者 z-index 声明。 inherit 规定应该从父元素继承 position 属性的值。而只有使用了定位属性那么以下这些值才管用!
Bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 clip 设置元素的形状。元素被剪入这个形状之中然后显示出来。 left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 Right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 Top 定义了一个定位元素的上外边距边界与其包含块上边界之间的 偏移。 z-index 设置元素的堆叠顺序 。
Overflow 溢出隐藏
设置当元素的内容溢出其区域时发生的事情。 我们一般设置的值为hidden
CSS 伪类(Pseudo-classes)
CSS 伪类(Pseudo-classes) 用于向某些选择器添加特殊的效果。 伪类的语法 selector:xxx-class {property: value} a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF}注意在 CSS 定义中a:hover 必须被置于a:link 和 a:visited之后才是有效的。 a:active 必须被置于a:hover之后才是有效的。
CSS 伪元素(Pseudo-elements)
CSS 伪元素用于将特殊的效果添加到某些选择器。
伪元素的语法选择器 : 伪元素 { 属性: 值 } 伪元素有很多
例如:
:first-letter 将特殊的样式添加到文本的首字母
:first-line 将特殊的样式添加到文本的首行更多伪元素大家可以去查看w3c文档!
CSS 盒子模型 (Box Model)
盒子模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式, 这也是CSS技术的核心之一!
元素框的最内部分是实际的内容直接包围内容的是内边距。 内边距呈现了元素的背景, 内边距的边缘是边框。 边框以外是外边距外边距默认是透明的,因此不会遮挡其后的任何元素。
为了方便理解请看以下图
如图 基本的CSS常用属性也就这些了先把这些搞明白了之后就可以尝试去做一些很简单的静态页面了通过实际的练习加深代码记忆! 点赞 ✍️评论 收藏❤️ 大家的支持就是我坚持下去的动力! 如果以上内容有任何错误或者不准确的地方欢迎在下面 留个言指出、或者你有更好的想法 欢迎一起交流学习❤️❤️ 更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️ 说不定有意料之外的收获哦..嘿嘿嘿、嘻嘻嘻!
