CSS常用属性，选择器，盒子模型

最新推荐文章于 2024-05-18 16:20:54 发布
最新推荐文章于 2024-05-18 16:20:54 发布
阅读量139 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50796134/article/details/116174659
版权

CSS常用属性，选择器，盒子模型

一.什么是CSS

  1. CSS 指的是层叠样式表* (Cascading Style Sheets) *：也称级联样式表。
  2. CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
  3. CSS 节省了大量工作。它可以同时控制多张网页的布局
  4. 外部样式表存储在 CSS 文件中

如何添加 CSS

有三种插入样式表的方法：

外部 CSS
内部 CSS
行内 CSS
（1）外部 CSS
每张 HTML 页面必须在 head 部分的 元素内包含对外部样式表文件的引用。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="文件名.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
/*文件名.css
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}*/

(2)内部CSS
内部样式是在 head 部分的 

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

（3）行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

注意：1.css具有层叠顺序

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高
（1）行内样式（在 HTML 元素中）
（2）外部和内部样式表（在 head 部分）
（3）浏览器默认样式

2.如果在不同样式表中为同一选择器（元素）定义了一些属性，则将使用最后读取的样式表中的值。（外部样式和内部样式的顺序）

二.CSS选择器

有五种选择器

1.简单选择器

   根据名称、id、类来选取元素

（1）CSS 元素选择器

   基本结构：`html元素名称+{ 具体格式}`

eg: h1 {  
  text-align: center;
  color: red;
  }

（2）CSS id 选择器

如果一个html元素具有id属性，那么可以使用一个井号（#）后接元素id为该元素设置格式

基本结构：

<p   id="yuyuan">  </p>
css:
 #yuyuan+{具体格式}

（3）CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

基本结构：.+类名+{格式}

<!DOCTYPE html>
<html>
<head>
<style>
.cent {
  text-align: center;
 }
</style>
</head>
<body>
<h1 class="cent">居中的标题</h1>
<p class="cent">居中的段落</p> 
</body>
</html>

当然，还可以指定只有特定的 HTML 元素会受类的影响。例如：p.cent { 格式}；HTML 元素也可以引用多个类。<p class="center large">第三方</p>其中，p元素有两个类
（4）CSS 通用选择器

（*）选择页面上的所有的 HTML 元素。对页面上的每一个html元素进行格式设计  `* +{格式}`

（5）CSS 分组选择器

 分组选择器选取所有具有相同样式定义的 HTML 元素。用逗号隔开，一起写样式，最大程度缩减代码量，避免重复

2. 组合器选择器

    根据它们之间的特定关系来选取元素
    组合器是解释选择器之间关系的某种机制。CSS 选择器可以包含多个简单选择器。 在简单选择器之间，我们可以包含一个组合器。 CSS 中有四种不同的组合器。

在这里插入图片描述

（1） 后代选择器 (空格)

   前面元素包含后一个元素的部分应用下面的样式

eg:div p {
  background-color: yellow;
}

<div> 元素内的所有 <p> 元素背景色为黄

（2）子选择器 (>)

子选择器匹配属于指定元素子元素的所有元素。用法与后代选择器类似。
但是注意，与后代选择器相比，子选择器中被包含元素不能被别的元素再包含，不然就不属于子代，只属于后代。

（3）相邻兄弟选择器 (+)

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。eg:div+p 则匹配与div同级的最近的p元素符合{中括号中的样式}

（4）通用兄弟选择器 (~)

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。eg:div~p 则在html代码中在div 元素后的所有同级p元素符合{中括号中的样式}

3.伪类选择器

 根据特定状态选取元素

什么是伪类？
伪类用于定义元素的特殊状态。
例如，它可以用于：

  1. 设置鼠标悬停在元素上时的样式
  2. 为已访问和未访问链接设置不同的样式
  3. 设置元素获得焦点时的样式

（1）锚伪类

     链接能够以不同的方式显示

     /* 未访问的链接，最开始显示为红色 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 ，颜色变为绿色*/
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接，颜色变为粉色 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 在点击的一刹那颜色变为蓝色 */
a:active {
  color: #0000FF;
}
}

（2）其他的伪类和 CSS 类结合

 具体的html元素+ ：+伪类{格式}

eg1: 
/* 鼠标覆盖div内内容时内容由绿色变为蓝色*/
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}

eg2:CSS - :first-child 伪类
:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。即首个 子 元素具有定义的伪类样式

eg3:CSS - :lang 伪类
:lang 伪类允许您为不同的语言定义特殊的规则。

eg::lang 为属性为 lang="en" 的 <q> 元素定义引号
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
<p><q lang="no">内容</q></p>内容前后会有~

在这里插入图片描述

4.伪元素选择器

 选取元素的一部分并设置其样式

CSS 伪元素用于设置元素指定部分的样式。
例如，它可用于：

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容
  • 当然，伪元素可以与 CSS 类结合使用，也可以组合几个伪元素。
    （1）::first-line 伪元素
    ::first-line 伪元素用于向文本的首行添加特殊样式。
    eg:p::first-line {格式}
    （2）::first-letter 伪元素
    ::first-letter 伪元素用于向文本的首字母添加特殊样式。注意::first-letter 伪元素只适用于块级元素
    （3） ::before 伪元素
    ::before 伪元素可用于在元素内容之前插入一些内容。
    在这里插入图片描述

5. 属性选择器

 根据属性或属性值来选取元素

在这里插入图片描述

eg:
1.CSS [attribute] 选择器
a[target] {
  background-color: yellow;
}
2.CSS [attribute="value"] 选择器
a[target="_blank"] { 
  background-color: yellow;
}
3.CSS [attribute~="value"] 选择器
[title~="flower"] {
  border: 5px solid yellow;
}
4.CSS [attribute|="value"] 选择器，值必须是完整或单独的单词！
[class|="top"] {
  background: yellow;
}
5.CSS [attribute^="value"] 选择器，值不必是完整单词！
[class^="top"] {
  background: yellow;
}

三.盒子模型

CSS 框模型

所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。框模型允许我们在元素周围添加边框，并定义元素之间的空间。
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。

1.两种框模型：

（1）标准盒子模型
在这里插入图片描述
具体实例：

<style>
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>

（2）IE盒子模型
在这里插入图片描述

2.CSS盒模型和IE盒模型的区别

在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

3.详细内容

  • 内容 - 框的内容，其中显示文本和图像。
  • 内边距 - 清除内容周围的区域。内边距是透明的。
  • 边框 - 围绕内边距和内容的边框。
  • 外边距 - 清除边界外的区域。外边距是透明的。
    注意：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
  • 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
  • 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置
* {
  margin: 0;
  padding: 0;
}
  • 内容区域的宽度和高度跟元素的宽度和高度是不一样的，
    （1）元素的总宽度应该这样计算：
    元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
    （2）元素的总高度应该这样计算：
    元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
    （3）（margin，border的道理也是一样的）padding是4个方向的，所以我们能够分别描述4个方向的padding。也可以综合写在一起(上、右、下、左)（顺时针方向，用空格隔开。）
    1.如果写了四个值，则顺序为：上、右、下、左。分别为上，下，左，右内边框
    2.如果只写了三个值，则顺序为：上、右、下。第一个值为上内边距，第二个值为左右两个内边距的值，第三个值为下内边距
    3.如果只写了两个值，则第一个值为上下两个内边距离的值，第二个值为左右两个内边距的值。
 padding-top: 30px;
	padding-right: 20px;
	padding-bottom: 40px;
	padding-left: 100px;

padding:30px 20px 40px 100px;

四.CSS常用属性

1.颜色
（1）背景色

<style>
h1
{background-color:DodgerBlue;}/*background-color*/
</style>
<body>
<h1>China</h1>
</body>

（2）文本色

<style>
h1
{color:DodgerBlue;}/*color*/
</style>
<body>
<h1>China</h1>
</body>

（3）边框色

<style>
h1
{border:2px solid Tomato;}/*border :边框大小，边框线，边框颜色*/
</style>
<body>
<h1>China</h1>
</body>

（4）颜色的表示方式：颜色名字、RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值

 1.RGB：rgb(red, green, blue)，每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。eg:rgb(60, 179, 113)
 2.HEX:#rrggbb 其中 rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）eg:#3cb371
 3.HSL:hsla(hue, saturation, lightness)色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。eg:hsl(147, 50%, 47%)

2.背景

  • background-color:设置背景色
body {
 background-color: lightblue;
}
  • background-image：设置背景图片
body {
  background-image: url("paper.gif");
}

  • background-repeat：在水平和垂直方向上都重复图像;默认情况下，background-image 属性在水平和垂直方向上都重复图像
    background-repeat: repeat-x;：水平重复图相关
    background-repeat: repeat-y：垂直重复图像

  • background-attachment：属性指定背景图像是应该滚动还是固定的fixed（不会随页面的其余部分一起滚动scroll）

 body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}
  • background-position
body { 
background-position:center;
/*或者使用top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right*/
}

3.边框
（1） 边框类型。

border-style 属性指定要显示的边框类型
允许以下值：
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框

（2）border-width 属性指定四个边框的宽度
（3）border-color 属性用于设置四个边框的颜色

4.文本

  • color 属性用于设置文本的颜色
  • border-color 属性用于设置四个边框的颜色
  • text-align 属性用于设置文本的水平对齐方式
eg:h1 {
  text-align: center;/left,right
}
  • vertical-align 属性设置元素的垂直对齐方式
img.top {
  vertical-align: top;/center,bottom
}
  • text-decoration 属性用于设置或删除文本装饰。其他 text-decoration 值用于装饰文本
eg1:text-decoration: none; 通常用于从链接上删除下划线
eg2:
h1 {
  text-decoration: overline;/line-through,underline
}

5.字体

 通用字体族
 在 CSS 中，有五个通用字体族：
 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
 草书字体（Cursive）- 模仿了人类的笔迹。
 幻想字体（Fantasy）- 是装饰性/俏皮的字体。

.p1 {
  font-family: "Times New Roman", Times, serif;
}
  • font-family 属性规定文本的字体font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。
  • font-style 属性主要用于指定斜体文本
    normal - 文字正常显示
    italic - 文本以斜体显示
    oblique - 文本为“倾斜”
  • font-weight 属性指定字体的粗细
    normal
    bold 加粗
    lighter 变细
  • font-size 属性设置文本的大小
    以像素设置字体大小

6.列表
list-style-type 属性指定列表项标记的类型

ul.a {
  list-style-type: circle;/square 圆形，正方形标志
}
ol.c {
  list-style-type: upper-roman;/lower-alpha 罗马数字，ABC字母标志
}

list-style-image 属性将图像指定为列表项标记

ul {
  list-style-image: url('sqpurple.gif');
}

list-style-position 属性指定列表项标记（项目符号）的位置

list-style-position: outside/inside

list-style-type:none 属性也可以用于删除标记/项目符号

我们还可以使用颜色设置列表样式

ol {
  background: #ff9999;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

在这里插入图片描述

7.表格
（1）border 属性

table, th, td {
  border: 1px solid black;
}

（2）border-collapse 属性设置是否将表格边框折叠为单一边框

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

将表格边框折叠为单一边框
（3）表格的宽度和高度由 width 和 height 属性定义

table {
  width: 100%;
   height: 50px;
}

（4）text-align 属性设置 或 中内容的水平对齐方式（左、右或居中）
（5）vertical-align 属性设置 或 中内容的垂直对齐方式（上、下或居中）
（6）如需控制边框和表格内容之间的间距，要 和 元素上使用 padding 属性
8.链接
链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式
四种链接状态分别是：
a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时

eg:a:visited {
  color: green;}
玛卡巴卡x
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS盒子模型及属性
weixin_56267337的博客
07-24 505
CSS介绍和使用
css盒子模型 css margin 外边框合并
12-01
CSS 框模型概述 ...这可以分别进行，也可以使用通用选择器对所有元素进行设置： * { margin: 0; padding: 0; } 在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内
三、CSS基础部分
用CSS3动画实现loading效果
06-04 300
CSS背景 background-color背景颜色 CSS中，颜色值通常以下列方式定义: 十六进制 - 如："#ff0000" RGB - 如：“rgb(255,0,0)” 颜色名称 - 如：“red” background-image背景图像 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体. body { background-image:url('paper.gif'); } background-repeat设置背景图的平铺方式 一些图像如果在水平方向与垂直方向平铺，这样看起来很
Vue的class 和 style 的绑定语法
twoyearTrainee的博客
07-13 203
class 和 style 的绑定语法 这两个其实是标签上面的属性，例如： <p class='one two' style='color:red;'>this is a test</p> 既然是属性，那么我们就可以使用上午所学的特性的绑定方式，来将这两个值和 data 相关联。 但是，比较麻烦。所以 vue 对这两个属性专门做了增强，可以采用对象的和数组的方式来进行绑定。 class 对象语法：可以给class绑定一个对象，而非字符串。 代码示例如下： <body>
菜鸟教程-css学习笔记
微电子学与固体电子学-俞驰
12-10 747
CSS实例中有很多CSS的例子，可以学习。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> body { background-color:#d0e4fe; } h1 { ...
CSS 列表
山水子农
06-19 945
1、CSS列表属性作用如下：     设置不同的列表项标记为有序列表     设置不同的列表项标记为无序列表     设置列表项标记为图像 2、列表   在HTML中，有两种类型的列表：    无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）    有序列表 - 列表项的标记有数字或字母   使用CSS，可以列出进一步的样式，并可用图像作列表项标记。 3、不同的列表项标记
top,bottom,left,right,horizontalCenter和verticalCenter样式
weixin_34362991的博客
01-19 195
verticalCenter=“0” 表示垂直居中，horizontalCenter=0表示水平居中 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.ad...
逆袭之路——python 前端开发之CSS选择器及属性、盒子模型、浮动【day40】
絵飛ヾ的魚的博客
04-26 1058
今日内容概要 伪元素选择器 选择器优先级 CSS 字体样式 CSS 文字属性 CSS背景属性 CSS 边框 display属性 盒子模型 浮动(重要) 解决浮动造成的影响 今日内容详细 一、伪元素选择器         通过css操作文本内容 修改首个字体样式 p:first-letter { color: red; font-size: 48px;
css基础、选择器介绍、样式介绍
12-29
盒子模型：内容、边框、内边距、外边距； CSS布局：结构伪类选择器、伪元素、标准流、浮动； 定位：绝对定位、相对定位、固定定位、子绝父相； 装饰：垂直对齐方式、光标类型、边框圆角、overflow溢出部分显示效果
基本选择器、font的设置属性、text系列、盒模型的基本介绍
10-18
css3基本选择器、font中字体的设置属性、text系列的设置属性、颜色表示方法、盒子的基本结构以及模型
50道CSS基础面试题
05-23
50道CSS基础面试题（附答案） 1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 2 box-sizing属性？ 3 CSS选择器有哪些？哪些属性可以继承？
Bootstrap.css与layDate日期选择样式起冲突的解决办法
01-21
问题如图: 给大家看下正常的layDate年份选择图片: ...}重置了浏览器的盒子模型。 在网上搜索了一会，发现很多博客的解决办法是这样的： 是加上以下样式: .laydate_box, .laydate_box * { box-sizing:c
列表使用图片作为标记类型
firstcode666的博客
10-06 242
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> ul { list-style-type:none; padding:0px; margin:0px; } ul li { background-image:url(sqpurple.gif);a background-rep.
CSS-相对和绝对和固定位置
最新发布
Kevin7_35Durant的博客
05-18 304
将位置改成相对位置，与原先的位置顶部相距100px。原来的位置是占用状态，其他元素无法使用。改变位置的参照物是自己原来的位置。元素的位置在网页滚动时不变。属性值：relative。属性值：absolute。改变位置的参照物是父元素。属性：position。属性：position。属性：positon。
实用css整理
qq_37004501的博客
05-17 385
一般用于特殊时期，网页变灰，只需要给body标签添加这行样式代码。给body标签设置这个属性样式，改变角度看看效果吧。
Vue3无限滚动组件TypeScript、TailwindCSS
远小帅的博客
05-17 161
Vue3无限滚动组件TypeScript、TailwindCSS
css使用clip-path裁剪出不规则图形并绑定点击事件
qq_40576549的博客
05-16 316
使用工具拖拽出红色区域图形并获取到对应的 clip-path: polygon(使用方式见下方图解（ 多边形裁剪可视化工具。
谷歌浏览器css font-size 10px以下不生效
芳草萋萋鹦鹉洲哦
05-16 219
chrome://settings/fonts 外观——自定义字体——最小字号，修改此处配置即可。这时候如果是谷歌浏览器 需要在去浏览器设置重新设置字体大小。做页面时发现字体到达12px之后 ，无论多少小都无法改变。F12 浏览器控制台定义8px依然无效。
前端 CSS 经典：filter 滤镜
weixin_64684095的博客
05-17 384
什么叫滤镜呢，就是把元素里的。
写一篇使用盒子模型和选择器制作网页的实验报告
05-29
实验报告：使用盒模型和选择器制作网页 一、实验目的 本实验旨在通过使用盒模型和选择器，制作一个简单的网页，熟悉HTML元素、CSS样式的基本使用方法。 二、实验内容 1. 创建一个HTML文档，命名为“index.html”...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值