没有理想的人不伤心

CSS基础

2023/10/26
3
0

image.png

CSS基础

CSS层叠样式表 (Cascading Style Sheets)基础

一、CSS样式表创建:

CSS注释:/* */

1、内联样式:

内联嵌入HTML标签之中

如:<div style="color blue;width: 100px;height: 100px; background: black;">demo2</div>

2、外部样式:

css代码存放在.css文件中

通过中使用标签来引用。

如:<link rel="stylesheet" href="css/style.css" />

可以在一个css文件中引入另一个css文件。

@import url(" ")

**3、嵌入样式表: **

在标签之间,使用<style></style>标签定义css样式。

二、样式选择器:

1、css规则:

有两个主要部分构成:样式选择器、以及一条或多条声明。

选择器{属性:值; 属性:值;}

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成,以分号结束。

属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。

2、样式选择器:

元素选择器   HTML元素标签{属性:值} 选择文档中指定元素。

ID选择器  #id{属性:值}  ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class选择器  .类名{属性:值} 类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

属性选择器  元素[属性]{} 选择指定元素的属性。

通配符选择器  *{属性:值} 选择文档中所有元素。

三、CSS背景:用于定义HTML元素的背景

颜色值的定义:

十六进制 - 如:“#ff0000”

RGB - 如:“rgb(255,0,0)”

颜色名称 - 如:“red”

background-color 规定要使用的背景颜色。

background-position 规定背景图像的位置。

left top

left center

left bottom

right top

right center

right bottom

center top

center center

center bottom

x% y%

xpos ypos 可以混合使用%和positions

background-size      规定背景图片的尺寸。

background-repeat 规定如何重复(平铺)背景图像。

repeat    默认。背景图像将在垂直方向和水平方向重复。

repeat-x 背景图像将在水平方向重复。

repeat-y 背景图像将在垂直方向重复。

no-repeat   背景图像将仅显示一次。

inherit   规定应该从父元素继承 background-repeat 属性的设置。

background-origin 规定背景图片的定位区域。

background-clip 规定背景的绘制区域。

background-image 规定要使用的背景图像。

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

fixed 固定,不随内容的滚动而滚动

scroll 默认滚动,随内容的滚动而滚动

简写背景属性:background。

如:body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}

写的顺序:

background-color

background-image

background-repeat

background-attachment

background-position

三、文字、文本属性:

1、文字属性:

color:red; 文字颜色 #ffeeees

font-size:12px; 文字大小

font-weight:bold; 文字粗细(bold/normal/lighter/bolder)

font-family:”宋体”; 文字字体

font-variant:small-caps; normal默认,small-caps显示小型的大写字母体(小写字母会被转换为大写)

font-style 字体样式 normal正常 italic斜体

2、文本属性:

text-align:center; 文本对齐(right/left/center)

line-height:10px; 行间距(可通过它实现文本的垂直居中)

text-indent:20px; 文本首行缩进

text-decoration:none; 文本修饰(none/underline/overline/line-through)

定义文本上的下划线/上划线/中划线,主要用来删除链接的下划线。

letter-spacing: 字间距

text-transform 文本转换,指定文本中的大小写

uppercase/lowercase/capitalize 大写、小写、单词首字母大写