前端与CSS

您所在的位置:网站首页 css设置内部元素间距 前端与CSS

前端与CSS

2023-05-13 17:27| 来源: 网络整理| 查看: 265

CSS 创建样式表分为三种情况: 内部样式表

选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} div{width:200px; height:200px; border:1px solid red;} 复制代码

行内式(内联样式)

复制代码

外部样式表(外链式)

复制代码

​ 样式优先级:内联样式>内部样式>外部样式 三种样式表区别:

行内样式表 :优点 书写方便;缺点 没有实现样式和结构相分离;使用情况 较少;控制范围 控制一个标签(少)。

内部样式表:优点 部分结构和样式相分离; 缺点 没有彻底分;使用情况 较多;控制范围 控制一个页面(中)。

外部样式表:优点 完全实现结构和样式相分离; 缺点 需要引入;使用情况 最多,推荐;控制范围 控制整个站点(多)。

id和class选择器

ID选择器:

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,id 属性和身份证一样具有唯一性。

HTML元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 "#" 来定义。注意: id 属性不能以数字开头。

语法: #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 复制代码

​ class选择器: class 选择器用于描述一组元素的样式,也叫做类选择器。

class 可以在多个元素中使用,并且一个元素也可以指定多个类名。

在 CSS 中,类选择器以一个点 "." 号来定义。

同样的类名的第一个字符也不能使用数字。

语法: .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 复制代码

​ ID 选择器和类(class)选择器的区别: 相同点:

都可以应用于任何元素

不同点:

ID 选择器只能在文档中使用一次,而类选择器可以使用多次。 可以使用类选择器词列表方法为一个元素同时设置多个样式(也就是一个元素可以制定多个类名),而ID只能指定一个。 CSS元素选择器

最常见的CSS选择器就是元素选择器,也就是标签选择器,也就是在HTML中元素的最基本的选择器。

语法: 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 复制代码

标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。

CSS背景(background)

background 属性用于定义 HTML 元素的背景。 定义元素背景效果的 CSS 属性有五种:

background-color 背景颜色 background-image 背景图像 background-repeat 背景图像设置水平或垂直平铺或不平铺 background-position 背景图像设置定位 background-attachment 背景图像设置固定或滚动 ​ 背景属性简写: body{ background:green url('images/fix.gif') no-repeat fixed 12px 24px; } 当使用简写属性时,属性值的顺序依次为: background-color --> background-image --> background-repeat --> background-attachment --> background-position 复制代码 CSS外观属性

CSS文本格式主要分为:文本颜色(color)、文本对齐方式、文本修饰、文本阴影、文本缩进、文本间距、字间距、文本空白处理、文本转换。 ​ 文本对齐方式:text-align属性有四个值:left,center,right,justify(两端对齐);属性默认值为auto。 文本修饰:text-decoration 属性用来设置或删除文本的修饰。

主要是用来删除超链接的下划线,也可以使用其他值来设置文本的修饰;

text-decoration:overline,设置文本上划线。

text-decoration:line-through; 设置文本中间划线。

text-decoration:underline; 设置文本下划线。 文本阴影:text-shadow: x y shadow color;

其中 x 是水平阴影的偏移值,

y 是垂直阴影的偏移值,

shadow 用于指定阴影的模糊值,即模糊效果的作用距离,不允许负值。

color 指定阴影的颜色。该属性有两个作用,产生阴影和模糊主体。 文本缩进:用来指定文本的首行缩进,允许为负值,如果值是负数,第一行则向左缩进。

CSS表示为:text-indent:2em,em 是相对文字大小的单位,1em 就是1个文字大小,2em 就是两个文字大小。 文本间距:行高,也就是文本行的高度。例如:line-height:22px; 字间距:letter-spacing 和 word-spacing 这两个属性都可用来增加或减少文本间的空白,即字间距。

不同的是: letter-spacing 属性设置字符间距,而 word-spacing 属性设置单词间距。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3