前端基础2——CSS样式

一、使用方式

概念：

• CSS：是一种用于修饰网页的文本样式语言，还可以配合Javascript脚本语言动态对网页各元素操作。

• 格式： 选择器{属性:值;属性:值;属性:值;…}

• 选择器：需要改变样式的HTML元素

• 常见选择器：标签选择器、类选择器、ID选择器、派生选择器

1.1 内联方式

• 行内样式：直接在标签里面进行使用。

1.对

标签内容进行美化，增加字体颜色、调整字体大小。

在HTML中如何使用css样式

2.查看效果。

1.2 内部方式

• 内嵌样式：在head标签中使用。

1.对

标签内容进行美化。

    
    
    


我爱中国
    ##美化文本。

2.查看效果。

1.3 外部导入方式（推荐）

• 在head标签中使用。

1.创建css样式存放目录文件。

2.在html模板文件中的head板块进行引用。

    
    
    
       ##引用CSS样式文件。


我爱中国
华夏九州

2.查看效果。

二、选择器类型

2.1 元素选择器

• 使用html标签作为选择器，为指定标签设置样式。

1.单个元素设置样式。

h1 {
    color: orange;
}

2.多个元素设置样式。

h1,h2 {
    color: orange;
}

3.子元素会继承最高级元素所有属性。所有子标签会继承父标签的样式，若子标签指定了样式，优先级高于父标签样式。

body {
	color: #000;
	font-family: Verdana, serif; /*字体*/
}

2.2 ID选择器

• 使用“id”作为选择器，为指定id设置样式。
• 使用格式：#id名{样式…}
• 特点：
  • 每个标签都可以设置id
  • 每个id名称只能在HTML文档中出现一次
  • id名称不能以数字开头，不能是标签名称
  • 在实际开发中，id一般预留JavaScript使用

1.示例代码。

    
    
    


我爱中国
华夏九州
测试ID选择器
    ##给标签指定id。

2.查看效果。

2.3 类选择器

• 类选择器：使用“类名”作为选择器，为指定id设置样式。
• 使用格式：.类名{样式…}

ID选择器与类选择器区别?

1. id名称在一个html页面中不能重复。
2. class名称在一个html页面中可以重复，常用于一个样式对多个标签使用3、id主要用于is选择，因为它是唯

1.示例代码。

2.查看效果。

2.4 派生选择器

• 派生选择器：依据元素在其位置的上下文关系来定义样式。
  

1.针对类设置样式。

    测试派生选择器1
    
测试派生选择器2

2.针对派生选择器设置样式。

    测试派生选择器1
    
测试派生选择器2

三、常用属性

概念图：

3.1 内边距和外边距

属性	描述
padding	设置四边的内边距
padding-top	上内边距
padding-right	右内边距
padding-bottom	下内边距
padding-left	左内边距

属性	描述
margin	设置四边的外边距，使用方法同padding
margin-top	上外边距
margin-right	右外边距
margin-bottom	下外边距
margin-left	左外边距

1.示例代码。

2.查看效果。

3.2 文本

属性	描述	值
text-align	文本对齐方式	left：左边 right：右边 center：中间 justify：两端对齐文本效果
text-decoration	文本修饰	none：默认，定义标准的文本，例如去掉超链接下划线。 line-through：删除线。 underline：文本下加一条线。
text-overflow	文本溢出后显示效果	clip：修剪文本。 ellipsis：显示省略号来代表被修剪的文本。 string：使用给定的字符串来代表被修剪的文本。
letter-spacing	字符间的距离	normal：默认。 length：自定义间距。
line-height	行间的距离（行高）	normal：默认。 length：设置固定值。
color	字体颜色	颜色名称，例如red。 十六进制值，例如#ff0000 rgb 代码，例如rgb(255,0,0)

1.使文本内容中间对齐。

2.去除超链接的下划线。

3.处理文本溢出显示效果，使用省略号显示。

4.调整字间距、行间距。

5.增加字体颜色，html css颜色代码参考连接。

3.3 边框

属性	描述	值
border	所有边框样式的缩写	示例：border: 1px solid blue; 宽度 样式 颜色
border-color	四边框的颜色	示例：border-color: red blue green yellow; 上右下左
border-style	边框样式	solid：实线边框。 dotted：点线。 dashed：虚线。 none：不显示边框，默认
border-radius	圆角边框	直接写像素
border-left border-right border-top border-bottom	左边框 右边框 上边框 下边框	例如设置底边框为虚线： border-bottom: 1px dotted red;
box-shadow	给元素添加阴影	格式：box-shadow: h-shadow v-shadow blur spread color inset; h-shadow：必选，水平阴影的位置。 v-shadow：必选，垂直阴影的位置。 blur：可选，模糊程度。 spread：可选，阴影的大小。 color：可选，阴影的颜色。 inset 可选，从外层的阴影（开始时）改变阴影内侧阴影。 示例1：box-shadow: 1px 2px 3px 1px #c2c2c2; 示例2：box-shadow: 0 5px 20px 0 #e8e8e8;

1.定义边框样式颜色，比如虚线蓝色。

2.设置圆角边框。

3.添加立体效果。

3.4 背景

属性	描述	值
background-color	背景颜色	颜色名称，例如red。 十六进制值，例如#ff0000。 rgb 代码，例如rgb(255,0,0)
background-image	背景图片	url(‘URL’)：图片路径。 none：不显示背景图片。
background-repeat	设置是否及如何重复背景图像	repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x：背景图像将在水平方向重复。 repeat-y：背景图像将在垂直方向重复。 no-repeat：背景图像将仅显示一次。
background-position	背景图片的位置	left、top、top right、center left、center center、center right、bottom left、bottom center、bottom right x% y% 水平位置和垂直位置
background-size	背景图片的尺寸	length：背景的高度和宽度，例如80px 60px。 percentage：以父元素的百分比设置背景图像的高度和宽度，例如50% 50%

1.添加背景图片。

2.将图片排列显示，图片尺寸必须小于边框尺寸。

3.调整背景图片位置。

3.5 定位

• position属性：把你元素定到什么位置，或者把你元素根据什么定位。
• 使用步骤：
  1. 先使用postion告诉怎么定位。
  2. 再告诉它定位到哪。
     • left：靠左距离
     • right：靠右距离
     • top：顶部距离
     • bottom：底部距离

值	描述
absolute	绝对定位，根据自己最近的一个父元素定位，而且父元素必须相对定位过。如果没父元素，根据窗口定位。
fixed	固定定位，是根据浏览器窗口进行定位。
relative	相对定位，相对于自己定位，偏移后，元素仍保持其未定位前的形状。原来的空间依然保留，只是看不到了。
static	默认值。没有定位，元素框正常生成，出现在正常的流中。

1.登陆页面，div页面在中间。

2.回到顶部，div在右下角

3.6 浮动

• float属性：定义元素在哪个方向浮动。
• 可选值：none、left、right

特点：

• 只能水平浮动，不能横向浮动。
• 浮动碰到父元素的边框或者浮动元素的边框就会停止。
• 浮动元素的后一个元素会围绕着浮动元素（典型应用：文字围绕图片）。
• 浮动元素的前一个元素不会受到任何影响（如果想让两个块元素并排显示，必须让两个块元素都应用float）

1.未定义浮动效果。

2.水平并排显示。

3.输入框并排显示。

4.文字围绕图片显示。

3.7 字体

属性	描述	值
font-size	设置字体的尺寸	xx-small 、 x-small 、 small、 medium 、 large、 x-large、xx-large，从小到大，默认值 medium。 length 固定长度，例如12px
font-family	字体系列。 可以写多个，如果第一个不支持，使用下一个。	Microsoft YaHei
font-weight	设置字体的粗细	normal：默认值。 bold：粗体。 bolder：更粗。 lighter 更细
font-style	字体样式	normal：正常。 italic：斜体。 oblique：倾斜的字体

1.设置字体类型。

2.设置字体粗细。

3.8 其他属性

属性	描述	描述
list-style-type	列表样式	none：不显示项目符号
overflow	内容溢出处理	hidden：溢出部分隐藏。 scroll：不管是否溢出都显示滚动。 auto：溢出显示滚动条，不溢出没有滚动条
display	是否及如何显示	none：隐藏该元素。 block：显示为块级元素。 inline：默认

1.不显示项目符号，默认是显示的。

2.内容溢出，显示滚动条。

3.隐藏div内容。

四、案例：登录页面

1.示例代码。

    
    
    



    
欢迎来到数码世界
    
        

            姓   名    

            数码兽    

        
        
    

2.效果展示。