css 设置背景图一半_前端初学大纲03~（CSS 概述）

最新推荐文章于 2023-08-08 10:35:57 发布

邓开峰

最新推荐文章于 2023-08-08 10:35:57 发布

阅读量715

点赞数 1

文章标签： css 设置背景图一半

本文链接：https://blog.csdn.net/weixin_36215861/article/details/112116385

版权

本文介绍了CSS的基础知识，包括代码语法、放置位置、继承性、选择器种类及其优先级、背景样式、字体样式和文本属性。讲解了如何设置背景颜色、图片、位置和重复，以及字体家族、大小、颜色和对齐方式。此外，还涵盖了行高、文本缩进、元素的盒模型、浮动和定位原理。内容深入浅出，适合前端初学者掌握CSS的基本用法。

摘要由CSDN通过智能技术生成

第四章 CSS 概述

第一节 CSS代码语法

• CSS全称为层叠样式表(Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

• css代码通常存放在<style></style>标签内

• css 样式由选择符和声明组成，而声明又由属性和值组成

• 选择符{属性:值}例：p{color:red;}

• 选择符：又称选择器，指明网页中要应用样式规则的元素

• 声明：在英文大括号{}中的的就是声明，属性和值之间用英文冒号:分隔。当有多条声明时，中间用英文分号;分隔，如：

p{
 font-size:12px;
 color:red;
}

第二节 CSS 放置位置

行内样式

• 直接书写在标签的style属性中

• 不建议使用

<div style="width:200px; height:200px;"></div>

内联式样式表

• 写在<style></style>标签中

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 .box{
  width:200px;
  height:200px;
  background-color:red;
 }
  </style>
 </head>
 <body>
 </body>
</html>

外联样式表

• 将一个独立的.css文件引入到HTML文件中，使用<link>标签写在<head>标签中。链接式会以网页文件主体装载前装载CSS文件。

• rel="stylesheet"定义类型为层叠样式表，一定要写

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <link href="My.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 </body>
</html>

第三节 CSS的继承

• CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。

• 不可继承样式：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear

• 可以继承的样式：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor

第五章 CSS 选择器

第一节选择器的种类

标签选择器

通过标签的名字，修改css样式

div{
  width:200px;
  height:300px;
}

通配符选择器

• 选择页面中所有的元素

*{
  margin:0;
  padding:0;
}

属性选择器

后代选择器

• 选择某个父元素下面所有的元素

.box p{
  background-color:red;  
}

一级子元素选则器

• 选择某个父元素的直接子元素

• 后代选择器是选择父元素的所有子孙元素，一级子元素原则器只选择第一级子元素，不会再向下查找元素

.box>p{
  background-color:red;  
}

id选择器

通过id查找页面中唯一的标签，用 # 标示id

#wrap{
  width:200px;
  height:300px;
}

class选择器

通过特定的class（类）来查找页面中对应的标签，以 . class名称

.box{
  width:200px;
  height:300px;  
}
<div class="box"></div>

伪类选择器

• :hover鼠标移入某个元素

.box:hover{
  color:red;
}

• :before在某个元素的前面插入内容

div:before{
  content:"- 台词";
 background-color:yellow;
 color:red;
 font-weight:bold;
}

• :after在某个元素的后面插入内容

div:after{
  content:"- 台词";
 background-color:yellow;
 color:red;
 font-weight:bold;
}

群组选择器

• 可以对多个不同的选择器设置相同的样式

.box,.box1,.box2{
  width:200px;
  height:300px;
}

第二节选择器的优先级

• 当有不同的选择器对同一个对象进行样式指定时，并且两个选择器有相同的属性被赋予不同的值时。

• 通过测算那个选择器的权重值最高，应用哪一个选择器的样式

• 权重计算方式

– 标签选择器：1

– class选择器：10

– id选择器：100

– 行内样式：1000

– !important 最高级别，提高样式权重，拥有最高级别

p{width:200px} /*权重 1*/
.box{width:200px} /*权重 10*/
.box p{width:200px} /*权重 11*/
#txt{width:200px} /*权重 100*/

• 如果两个选择器的权重值一样高，则应用距离对象最近的css样式

第六章 CSS样式（属性）

第一节背景样式

背景颜色background-color

• background-color:red

• 背景颜色的值可以是英文，可以是十六进制颜色值，可以是rgb，也可以是rgba

背景图片background-image

• background-image:url(bg01.jpg);

• 背景图片的大小可以和容器大小不一样

• 背景图片不会占位

• 如果容器大，背景图片小，背景图片会平铺铺满整个容器

背景图片位置background-position

• background-position:10px 100px;

• 背景图片定位的值是两个单位，分别代表坐标x，y轴

• 背景图片定位的值可以是应为left，right，top，bottom，center

• 背景图片定位的值也可以是百分比或者像素

背景图片重复background-repeat

• background-repeat:no-repeat

• no-repeat 设置图像不重复，常用

• round 自动缩放直到适应并填充满整个容器

• space 以相同的间距平铺且填充满整个容器

背景图片定位background-attachment

• background-attachment:fixed

• 背景图像是否固定或者随着页面的其余部分滚动

• background-attachment的值可以是scroll（跟随滚动），fixed（固定）

background缩写

• background:#ff0000 url(bg01.jpg) no-repeat fixed center

•

第二节字体样式

字体族font-family

• font-family:"微软雅黑","黑体";

使用逗号隔开多种字体（优先级从前向后，

最低0.47元/天解锁文章

邓开峰

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 设置背景图一半_前端初学大纲03~（CSS 概述）

第四章 CSS 概述第一节 CSS代码语法• CSS全称为层叠样式表(Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。• css代码通常存放在<style></style>标签内• css 样式由选择符和声明组成，而声明又由属性和值组成• 选择符{属性:值}例：p{color:red;}• 选择...
复制链接

扫一扫