Css的介绍

最新推荐文章于 2024-04-18 06:46:12 发布

艰难的路

最新推荐文章于 2024-04-18 06:46:12 发布

阅读量331

点赞数

分类专栏：前端从零开始文章标签：前端

本文链接：https://blog.csdn.net/qq_51649346/article/details/123775728

版权

前端从零开始专栏收录该内容

16 篇文章 2 订阅

订阅专栏

Css

什么是css

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

id和class

id选择器

id选择器可以为标有指定id的Html元素添加style样式，例如

<style>
    #id{
        background-color:red;
    }
</style>
<p id='1'>
    1111
</p>

在css中，一般用#来衔接对应的id

id在同一个html文件中不能重复，属于唯一标识

class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：例子

.center{
 XXX
}

css的创建

css创建可以分为在Html文件中创建和单独创建一个.css文件。

内部样式表

当在html文件中用css时，可以在head里用style来写，也可以在需要添加样式的元素属性那添加style

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

多重样式

如果某些属性在外部和内部都有对应的样式，那么属性值会从更加具体的样式表中继承过来,例如

在css文件中对p有以下属性:
p{
	color:red;
	text-align:left;
	font-size:10px;
}
在html文件中，即内部样式表中有以下属性:
p{
	text-align:right;
	font-size:15px;
}
最后p的样式属性，颜色会继承外部样式表的属性，而文字排序方式和字体大小则会继承内部的

Css的一些属性

background-color

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中:

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

background-image

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

当用image代替默认的背景图片后，仅仅是更换的背景图片，与当前的盒子内容无关，即还是可以写文字在此，也就成了文字出现在背景图上

当添加的图片比我们设置的范围要小的时候，我们可以设置平铺来让它多次显示或者填满

background-repeat:repeat-x;<!--在x（水平）方向上平铺-->
background-repeat:repeat-y;<!--在y(垂直）方向上平铺-->
background-repeat:no-repeat;<!--不平铺-->

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position

Text

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

文字对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

文本修饰

text-decoration 属性用来设置或删除文本的装饰。

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

文本缩进

文本缩进属性是用来指定文本的第一行的缩进

链接

对于Html的a标签，有一些专门的css属性用来设置它的样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

text-decoration删除链接中的下划线

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

列表

在 HTML中，有两种类型的列表：

无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母

使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

ul li {list-style-type: circle;}将无序列表的变成空心圆点
ul li {list-style-type: square;}变成实心方块
 
ol li {list-style-type: upper-roman;}变成罗马数字的一二三四五...
ol li {list-style-type: lower-alpha;}变成英文字母的abcd
大部分情况下用的最多的是
list-style-typle:none;取消前面的点

盒子属性

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V3DWAZGH-1648369126395)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220327155637861.png)]$

以此网页为例子

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EsXDdf6C-1648369126396)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220327155836505.png)]$

可以把一个完整的网页看做是这些盒子拼凑而成

当我们用浏览器的控制台去点其中的一个区域后，在css的样式那能看到一个盒子图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CSVnzjEN-1648369126397)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220327160018927.png)]$

可以看到，对于一个盒子而言，它具有外边距，边框，内边距，主体（内容）这几个部分组成

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

元素的宽度与高度

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

下面的例子中的元素的总宽度为300px：

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

最终元素的总宽度计算公式是这样的：

300+50+50+50=450px

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

border

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。效果取决于边框的颜色值

margin

值	说明
auto	设置浏览器边距。这样做的结果会依赖于浏览器
length	定义一个固定的margin（使用像素，pt，em等）
%	定义一个使用百分比的边距

在css中，可以指定不同的侧面不同的边距

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

padding

length	定义一个固定的填充(像素, pt, em,等)
%	使用百分比值定义一个填充

选择器

通配选择器

  * {
            margin: 0;
            padding: 0;
        }

元素选择器

  h1 {
            color: orange;
        }

ID选择器

 #id {
            color: orange;
        }

类选择器

  .class {
            color: orange;
        }

兄弟选择器

 /* a[href]{
            color: bisque;
        } */
        /* a[href='#1']{
            color: black;
        } */
        /* $正则表达式，表示以2结尾的 */
        /* a[href$='2']{
            color: blueviolet;
        } */
        /* ^表示以什么开始 */
        /* a[href^='#']{
            color: blueviolet;
        } */

伪类选择器

 /* 孩子选择器,先找box的孩子，然后从右往左找 */
        /* .box h1:nth-child(2){
            color: blueviolet;
        } */
        /* 这个是从左往右匹配，首先找p标签，然后把p标签全部找出来排序，将其中第二个改变 */
        /* .box p:nth-of-type(2){
            color: rgb(53, 143, 143);
        } */
        /* 找最后一个孩子 */
        /* .box a:last-child{
            color: rgb(179, 29, 49);
        } */
        /* 找P标签下的第一个孩子 */
        /* .box p:first-of-type{
            color: rgb(182, 146, 146);
        } */

艰难的路

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Css的介绍

Css文章目录Css什么是cssid和classid选择器class选择器css的创建内部样式表外部样式表多重样式Css的一些属性background-colorbackground-imageText链接列表盒子属性元素的宽度与高度bordermarginpadding选择器通配选择器什么是cssCSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样
复制链接

扫一扫