css基本语法

👤拔丝英语网 🕔2024/01/09 10:40 📁国外生活

声明：

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明：

h1{  color:blue;  font-size:12px;}

选择器是您需要改变样式的HTML元素(标签)。每一个声明由一个属性和一个值组成的。

声明总是以分号“；”结束，声明总以大括号“{}”括起来。

注释以“/*”开始，以“*/”结束，实例如下：

/*注释*/

CSS id和class，以及标签：

id选择器： HTML元素(标签)以id属性来设置id选择器，CSS中id选择器以“#”来定义：

/*设当id="Id_Value"时：*/#Id_value{  color:red;}

注意事项：id属性不要以数字开头。

class选择器：HTML中以class属性表示，在CSS中，选择器以一个点“.”号显示：

/*当Class="class_value"时*/.class_value{  color:red;}

元素(标签)选择器：HTML中的元素(标签)属性表示，在CSS中，选择器不加任何符号写，比如：

/*设有一个<h1></h1>元素(标签)*/h1{  color:red;}

一般不建议，使用时给class属性或者id属性。

CSS 创建：

三种插入样式表：

外部样式表
内部样式表
内联样式

外部样式表：使用外部样式表对于需要在多个页面上应用相同样式的情况是理想的选择，因为它提供了一种集中管理和维护样式的方法。在外部样式表的情况下，您可以通过修改一个单独的样式文件来改变整个网站的外观，而不必逐个编辑每个网页的样式规则。

<head>  <link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

“href”的值是CSS文件的路径。

内部样式表：CSS的内部样式表是位于HTML文件中的<head>区域，通过<style>标签来定义。

<head>    <style>      div {        color: hotpink;      }  </style>  </head>

内部样式表虽然方便，但也有一些局限性，比如如果你想在多个页面中应用样式，就需要在每个页面中都定义一次样式，这显然是非常麻烦的。因此，对于大型网站，通常会使用外部样式表。

内联样式：内联样式是CSS的一种应用方式，它直接在HTML标签内部使用style属性来设置元素的样式。

<p style="color:red;font-size:30px;">这是一个段落。</p>

内联样式的优点是方便快捷，可以快速地改变元素的样式。但是，它的缺点也很明显。首先，如果需要在多个元素上应用相同的样式，你需要对每个元素都单独设置样式，这将导致HTML代码变得非常冗长。其次，如果你之后需要修改元素的样式，你需要对每个元素单独进行修改，这将会非常麻烦。因此，对于大型网站，不建议使用内联样式。

多重样式优先级：

内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

CSS 背景：

属性：

background-color   =>   这个属性用于设置元素的背景颜色。background-image   =>   这个属性用于在元素中设置背景图像。background-repeat  =>   这个属性用于设置背景图像是否以及如何重复。background-attachment  =>  这个属性用于设置背景图像是否固定或者随着页面的其余部分滚动。background-position  =>  这个属性用于设置背景图像的起始位置。

背景颜色：background-color 属性定义了元素的背景颜色。

body{  background-color:brue;}

CSS中，颜色值通常以下方式定义：

十六进制："#000000"
RGB："rgb(255,0,0)"
RGBA："rgba(255,0,0,0)"，最后一个数字是透明度
颜色名称："red"

背景图像：background-image 把图像设置为背景。

属性值：

background-image:url('图像的路径');background-image:none;       /*默认，无图像背景会显示*/background-image:linear-gradient();   /*创建一个线性渐变的"图像"(从上到下)，后续会详细的讲解*/background-image:radial-gradient();   /*用径向渐变创建 "图像"。*/background-image:repeating-linear-gradient();   /*创建重复的线性渐变 "图像"*/background-image:repeating-radial-gradient();  /*创建重复的径向渐变 "图像"*/background-image:inherit;     /*指定背景图像应该从父元素继承*/

渐变后续文章会详细讲解。

背景图像 - 水平或垂直平铺：background-image 属性会在页面的水平或垂直方向平铺。

background-repeat:repeat;     /*背景图像将向垂直和水平方向重复。这是默认*/background-repeat:repeat-x;  /*只有水平位置会重复背景图像*/background-repeat:repeat-y;   /*只有垂直位置会重复背景图像*/background-repeat:no-repeat;  /*background-image 不会重复*/background-repeat:inherit;   /*指定 background-repeat 属性设置应该从父元素继承*/

背景图像 - 固定或滚动：background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment:scroll;     /*背景图片随着页面的滚动而滚动，这是默认的。*/background-attachment:fixed;      /*  背景图片不会随着页面的滚动而滚动。*/background-attachment:local;      /*背景图片会随着元素内容的滚动而滚动。*/background-attachment:initial;    /*  设置该属性的默认值。*/background-attachment:inherit;    /*指定 background-attachment 的设置应该从父元素继承*/

背景图像 - 起始位置：background-position 属性设置背景图像的起始位置。

background-position:x% y%;    /*第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。。默认值为：0％0％*/

CSS 文本格式：

文本颜色：颜色属性"color"被用来设置文字的颜色。

h1{  color:red;}

文本对齐方式：文本排列属性"text-align"是用来设置文本的水平对齐方式。可居中或对齐到左或右，两端对齐。

text-align:left;     /*把文本排列到左边。默认值：由浏览器决定*/text-align:right;    /*把文本排列到右边。*/text-align:center;   /*把文本排列到中间*/text-align:justify;  /*实现两端对齐文本效果。*/text-align:inherit;  /*规定应该从父元素继承 text-align 属性的值*/

设置文本方向：“direction” 属性指定文本方向/书写方向。

direction:ltr;  /*默认*/direction:rtl;  /*从右到左*/

设置字符间距：“letter-spacing”设置字符间距。

letter-spacing:normal;  /*默认*/letter-spacing:length;  /*定义字符间的固定空间（允许使用负值）。*/

文本修饰：“text-decoration”属性规定添加到文本的修饰，下划线、上划线、删除线等。

三种属性：

text-decoration-line
text-decoration-color
text-decoration-style

text-decoration:underline;      /*定义文本下的一条线。*/text-decoration:overline;       /*定义文本上的一条线。*/text-decoration:line-through;   /*定义穿过文本下的一条线。*/text-decoration:blink;          /*定义闪烁的文本。*/

缩进首行：“text-indent”缩进元素中文本的首行。

text-indent:数值;       /*定义固定的缩进*/

设置阴影：“text-shadow”设置文本阴影。

text-shadow: h-shadow v-shadow blur color;

h-shadow    必需。水平阴影的位置。允许负值。v-shadow    必需。垂直阴影的位置。允许负值。blur        可选。模糊的距离。color       可选。阴影的颜色。参阅 CSS 颜色值。

控制字母：“text-transform”控制元素中的字母。

text-transform:capitalize;     /*文本中的每个单词以大写字母开头。*/text-transform:uppercase;      /*定义仅有大写字母*/text-transform:lowercase;      /*定义仅有小写字母*/

CSS 字体：

CSS字体：“font-family”属性设置文本的字体系列。

font-family:字体名称;

字体样式：“font-style”主要是用于指定斜体文字的字体样式属性。

font-style:normal;   /*正常显示文本*/font-style:italic;   /*以斜体字显示的文字*/font-style:oblique;  /*文字向一边倾斜（和斜体非常类似，但不太支持）*/

字体大小：“font-size”设置文字的大小与像素，让你完全控制文字大小。

font-size:数值;

字体粗细：“font-weight”设置字体粗细。

font-weight:数值;

400等同于正常，700开始渐渐变粗。

CSS 链接：

连接样式：链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

a:link     /*正常，未访问过的链接*/a:visited  /*用户已访问过的链接*/a:hover    /*当用户鼠标放在连接上时*/a:active   /*链接被点击的那一刻*/

实例：

a:link {color:#000000;}      /* 未访问链接*/a:visited {color:#00FF00;}  /* 已访问链接 */a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */a:active {color:#0000FF;}  /* 鼠标点击时 */

这些属性也可以用在别的标签上。比如：

p:hever{color:#ff00ff}p:active{color:#0000ff}

这两个属性比较常用的。

盒子模型：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

CSS 边框：

边框样式：“border-style”属性用来定义边框的样式：

dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。效果取决于边框的颜色值

边框宽度：“border-width”属性为边框指定宽度

border-width:数值;

边框颜色：“border-color”属于用于设置边框的颜色，可以设置的颜色：

border-color:16进制或者RGB值;

边框-单独设置各边：可以指定不同的侧面不同的边框：

"bottom"：下边框
"left"：左边框
"right"：右边框
"top"：上边框

border-方向:值;border-方向-color:颜色值border-bottom-style:样式值;border-bottom-width:宽度值;

css基本语法

发表评论

发表回复

相关文章

发表评论

发表回复