预习博客（什么是CSS+CSS选择器+CSS常用属性+盒子模型）

最新推荐文章于 2021-04-27 23:37:50 发布

散落于尘埃

最新推荐文章于 2021-04-27 23:37:50 发布

阅读量170

点赞数 1

本文链接：https://blog.csdn.net/m0_56018900/article/details/116201060

版权

前端

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

一、CSS基础

1.CSS概述

（1）CSS样式

•CSS指的是层叠样式表（Cascading Style Sheets），也称级联样式表

•内容和样式相分离，便于修改样式

•外部样式表存储在 CSS 文件中

（2）CSS语法

CSS 规则集（rule-set）由选择器和声明块组成：
CSS 选择器
•选择器指向需要设置样式的 HTML 元素。
•声明块包含一条或多条用分号分隔的声明。
•每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
•多条 CSS 声明用分号分隔，声明块用花括号括起来。
（示例）：

<body>
<p>天使投资指早期投资，尤其指个人早期投资。</p>
<p> VC，Venture Capital，所谓风险投资、创业投资，是相对靠
前的非公开市场股权投资</p>
<p> PE，Private Equity，所谓私募资本、非公开市场资本，既是
私募股权投资的统称，又特指相对靠后的股权投资。</p>
</body>

p{                   //选择器
 font-size:12px;     /*字号*/
 color:blue;         /*文字颜色*/
 font-weight:bold;   /*加粗*/
 //属性名    属性值

在这里插入图片描述
注意
•最后一条声明可以没有分号，但是为了以后修改
方便，一般也加上分号。
•为了使用样式更加容易阅读，可以将每条代码写
在一个新行内

（3）CSS添加方法

（示例）：
在这里插入图片描述

1.行内 < p style >

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<p style = “color:red;”>
天使投资指早期投资，尤其指个人早期投资。
</p>

</body>
</html

2.内嵌样式 < style >

<!DOCTYPE HTML>
<html>
<head>

<style type="text/css">
p{
color:red; /*设置字体颜色*/
}
</style>

</head>
<body>
<p>天使投资指早期投资，尤其指个人早期投资。</p>
</body>
</html>

注意
• 即使有公共CSS代码，也是每个页面都要定义的
• 适合文件很少，CSS代码也不多的情况
• 如果一个网站有很多页面，每个文件都会变大，后期维护难度也大
3.单独文件 < link >
外部样式表文件：style.css

p{
 color:red;/*设置文字颜色*/
 }

网页文件：1.html

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p>天使投资指早期投资，尤其指个人早期投资。</p> 
</body>
</html>

优点
•页面结构HTML代码与样式CSS代码完全分离
•维护方便
•如果需要改变网站风格，只需要修改公共CSS文件
•可以在同一个HTML文档内部引用多个外部样式表
4.优先级
• 多重样式可以层叠，可以覆盖
• 样式的优先级按照 “就近原则” ：
• 行内样式> 内嵌样式> 链接样式> 浏览器默认样式
（示例）：

• 外部样式表文件
h3{
color:red;
text-align:left;
font-size:8pt;
}

• 内嵌样式
h3{
text-align:right;
font-size:20pt;
}

在这里插入图片描述

二、CSS选择器

1.选择器

CSS选择器可以分为三大类，即id选择器、class选择器、标签选择器。它们之间可以有多种组合，有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等。

（1）标签选择器

（示例）：
CSS

<style type="text/css">
body{background-color: #ccc;
text-align:center;
font-size:12px; }
h1 {font:“黑体";font-size:20px;}
p {color:red; font-size:16px;}
hr {width:200px;}
</style>

HTML

<body>
<h1>标题</h1>
<hr>
<p>正文的段落</p>
版权所有
</body>

在这里插入图片描述

（2）类别选择器

（示例）：
CSS

<style type="text/css"> 
p { font-size:12px; }
.one{ font-size:18px; }
.two{font-size:24px; }
</style>

HTML

<body>
<p class="one">类别1</p>
<p class="one">类别1</p>
<p class="two">类别2</p>
<p class="two">类别2</p>
<p>普通段落中的文字</p> 
</body>

在这里插入图片描述

（3）ID选择器

（示例）：
CSS

<style type="text/css">
#one{font-size:12px;}
#two{font-size:24px;}
</style>

HTML

<body>
<p id="one">文字1</p>
<p id="two">文字2</p>
</body>

在这里插入图片描述
与class的区别唯一性

2.声明

（1）嵌套声明

（示例）：
CSS

<style type="text/css">
p □ span{ 
color:red;
}
</style>

HTML

<body>
<p> <span>天使投资</span> 是投资方式的一种</p>
</body>

在这里插入图片描述

（2）集体声明

（示例）：
CSS

<style type="text/css">
h1,p { text-align:center;
}
</style>

HTML

<body>
<h1>欢迎访问论坛</h1>
<p>欢迎访问论坛</p>
</body>

在这里插入图片描述

（3）全局声明

（示例）：
CSS

<style type="text/css"> 
* { 
text-align:center; 
} 
</style>

HTML

<body>
<h1>欢迎访问论坛</h1> 
<p>欢迎访问论坛</p> 
<h2>欢迎访问论坛</h2>
</body>

在这里插入图片描述

三、CSS常用属性

CSS属性有：字体属性（font）、背景属性（background）、区块属性（block）、方框属性（box）、边框属性（border）、列表属性（list-style）、定位属性（position）等。

1.文本

在这里插入图片描述

1.单位
px：像素
em：1em——1个字符；2em——两个字符
%：百分比
在这里插入图片描述

2.颜色
red，blue，green
颜色名http://www.w3school.com.cn/cssref/css_colors_legal.asp
rgb(x,x,x)
RGB 值
每个颜色分量取值0-255
红色：rgb(255,0,0)
灰色：rgb(66,66,66)
rgb(x%, x%, x%)
RGB 百分比值 0%-100%
红色：rgb(100%,0%,0%)
rgba(x,x,x,x)
RGB 值，透明度
a值：0.0（完全透明）与 1.0（完全不透明）
红色半透明：rgba(255,0,0,0.5)
#rrggbb
十六进制数
红色： #ff0000
红色： #f00 去掉重复位
3.字符间距 letter-spacing
（示例）：
CSS

<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing: -3px;}
</style>

HTML

<body>
<h1>标题内容</h1>
<h2>文本段落主要内容</h2>
</body>

在这里插入图片描述
4.行高 line-height
（示例）：
CSS

<style>
p{font-size: 14px;
line-height: 2em;
}
</style>

HTML

<body>
<p>
这里是web前端开发课程…
</p>
</body>

在这里插入图片描述

5.对齐方式 text-align
（示例）：
CSS

<style>
h1{text-align: center }
.date{text-align: right}
.main{text-align: justify}
</style>

HTML

<h1>CSS text-align 实例</h1>
<p class="date">3 月 14 号</p>
<p class=“main”>“当我年轻的时候，。。。</p>

在这里插入图片描述
6.装饰线 text-decoration
（示例1）：
CSS

<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>

HTML

<body>
<h1>标题1文字</h1>
<h2>标题2文字</h2>
<h3>标题3文字</h3>
</body>

在这里插入图片描述
（示例2）：
CSS

<style type="text/css">
a{
text-decoration: none;
}
</style>

HTML

<body>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
</body>

去掉超链接下划线
在这里插入图片描述
7.字体 font
（示例）：

简化font

font: 斜体 粗体 字号/行高 字体
font: italic bold 16px/1.5em '宋体'；

2.背景与超链接

（1）背景属性

空元素需要先定义元素的高度和宽度
background
颜色图片 repeat
background-color
background-image
url（“logo.jpg”）
background-repeat
repeat
repeat-x
repeat-y
no-repeat

（2）超链接

链接的四种状态
a:link- 普通的、未被访问的链接
a:visited-用户已访问的链接
a:hover -鼠标指针位于链接的上方悬停
a:active -链接被点击的时刻
在这里插入图片描述
鼠标悬停放大字体
CSS

a{
font-size: 22px;
}
a:hover{
font-size: 120%;
}

HTML

<a href="#">web design</a>

在这里插入图片描述

3.列表与表格

（1）列表

无序列表ul有序列表ol
共用样式
list-style所有用于列表的属性
设置于一个声明中
list-style-image为列表项标志设置图像
在这里插入图片描述

list-style-position标志的位置
CSS

<style type="text/css">
.inside {
list-style-position: inside
}
.outside {
list-style-position: outside
}
</style>

HTML

<ul class="inside">
<li>HTML——网页结构</li>
<li>CSS——网页样式</li>
<li>JS——网页交互</li>
</ul>
<ul class="outside">
<li>HTML——网页结构</li>
<li>CSS——网页样式</li>
<li>JS——网页交互</li>
</ul>

在这里插入图片描述

list-style-type 标志的类型
在这里插入图片描述

（2）表格

width
height
border
border-collapse
在这里插入图片描述

奇偶选择器：nth-child(odd|even)

tr:nth-child(odd){
background-color:#EAF2D3;
}

在这里插入图片描述
表示：tr的父元素table的奇数个子元素，不管这些子元素是tr还是th

四、盒子模型

1.盒子模型概述

页面上区域、图片、导航、列表、段落，都可以是盒子
页面中的所有元素都可以看成一个盒子，占据着一定的页面空间

盒子模型组成

content内容
height高度、width宽度、border边框、padding内边距、margin外边距（CSS样式属性）
在这里插入图片描述
一个盒子的实际宽度、高度:content+padding+border+margin

CSS

<html>
<head>
<style type="text/css">
#box{
width:100px;
height:100px; 
border:1px solid; 
padding:20px;
margin:10px;
}
</style>
</head>

HTML

<body>
<div id="box">
内容内容内容…
</div>
</body>
</html>

在这里插入图片描述

2.盒子模型属性

（1）overflow属性

hidden超出部分不可见
scroll显示滚动条
auto如果有超出部分，显示滚动条
当内容溢出盒子框时，overflow属性取值
在这里插入图片描述

（2）border属性

border-width:px、 thin、medium、thick
border-style:dashed、dotted、solid、double
border-color:颜色
border:width style color

div{
border-width:2px;
border-style:solid;
border-color:red;
}

div{
border:2px solid 
red;
}

div{
border-bottom:1px 
solid red;
}

水平分割线
CSS

.line {
height:1px;
width:500px;
border-top:1px solid #e5e5e5;
}

（3）padding属性

CSS padding 属性定义元素边框与元素内容之间的空白区域，不可见。如果想调整盒子的大小可以调整内容区，内边距，边框。

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

（4）margin属性

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div{
width:100px;
height:100px;
margin:15px 10px 20px 30px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div> 
</body>
</html>

在这里插入图片描述
margin的合并：垂直方向合并，水平方向不合并

水平居中
图片、文字水平居中 text-align:center;
div水平居中 margin:0 auto;

（示例）：
CSS

#newsimglist{
text-align:center;
font-size:0; /*否则图间有空隙*/
}
#newsimglist img{
height:100px;
width:100px;
margin-left:5px;
border:1px solid #0cf;
padding:5px;
}

HTML

<div id="newsimglist">
<img src = "images/crisis.jpg" />
<img src = "images/crisis.jpg" />
<img src = "images/crisis.jpg" />
</div>

在这里插入图片描述

CSS

#newsimglist{
font-size:0; /*否则图间有空隙*/
}

在这里插入图片描述

散落于尘埃

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
预习博客（什么是CSS+CSS选择器+CSS常用属性+盒子模型）

文章目录前端一、CSS基础1.CSS概述（1）CSS样式（2）CSS语法（3）CSS添加方法二、CSS选择器1.选择器（1）标签选择器（2）类别选择器（3）ID选择器2.声明（1）嵌套声明（2）集体声明（3）全局声明三、CSS常用属性1.文本2.背景与超链接（1）背景属性（2）超链接3.列表与表格（1）列表（2）表格四、盒子模型1.盒子模型概述盒子模型组成2.盒子模型属性（1）overflow属性（2）border属性（3）padding属性（4）margin属性前端提示：这里可以添加本文要记录的大概
复制链接

扫一扫