CSS基础

最新推荐文章于 2024-09-09 09:01:46 发布

Stargazer（仰望星空）

最新推荐文章于 2024-09-09 09:01:46 发布

阅读量149

点赞数

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/qq_45145768/article/details/110358792

版权

前端基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的基础知识，包括CSS的格式、三种引入方式（行间、内联和外联）、长度单位和颜色单位，以及选择器的基本用法。此外，还讲解了常用的CSS属性，如字体、颜色、对齐方式等。内容覆盖了CSS初学者所需掌握的核心概念，旨在帮助读者快速入门CSS样式设计。

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

文章目录

css基础语法

css基础语法

一、CSS格式

选择器{
  属性名:属性值;
  属性名:属性值;
}

选择器负责圈定范围，要修改的元素集合，花括号内的声明由属性名和属性值组成(key:value)的形式，用于设定具体样式

二、CSS三种引入方式

行间式(不推荐,不利于后期维护)

<p style="color:red;">aaa</p>

内联式

<style>
    p {
        color:red
    }
</style>

外联式

头部引入外部样式表

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

p {
	width: 100px;
    height: 100px;
    background-color: red;
}

三种引入方式对比

<!-- 行间式 -->
<!-- 1.在标签头部的style属性内 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key：value新式赋值，value具有单位 -->
<!-- 4.属性值之间用；隔开 -->

<!-- 内联式 -->
<!-- 1.在style标签内（style标签一般作为head的子标签） -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key：value新式赋值，value具有单位 -->
<!-- 4.属性值之间用；隔开（一般独行分开赋值） -->
<!-- 5.格式：选择器{样式块} -->

<!-- 外联式 -->
<!-- 1.在外部css文件中 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key：value新式赋值，value具有单位 -->
<!-- 4.属性值之间用；隔开 -->
<!-- 5.格式：选择器{样式块} -->
<!-- 6.将html与css文件建立联系：html通过link标签链接外部css（一般在head里面） -->

三、CSS的长度单位和颜色单位

CSS基本长度单位

px像素，屏幕上显示的最小单位，用于网页设计
mm毫米
cm厘米
in英寸
pt点 1pt=72in，用于印刷业
em相当长度，一般1em=16px，用于流式布局
50vw==>%50 view width 当前浏览器能显示界面的一半

CSS基本颜色单位

colorName颜色名方式 red
rgb十进制方式 rgb(255,0,0)或rgb(100%,0,0),每两位代表一种颜色，分别代表Red、Green、Blue，可以简写成#abc
rgba此方式仅仅是为rgb方式加上了Alpha(不透明度)，不透明度范围为[0-1]
hsl()工业界的颜色标准,H(色相)S(饱和度)L(明度),第一个参数为0-360，后两个为百分比

四、CSS选择器(基础)

通配选择器
通配选择器(*)：匹配所有(html,body,body中的所有子标签(具有显示效果的标签)

*{
    border: solid;
}

标签选择器
标签选择器(标签名)：匹配指定标签名的对应所有标签

div{
    width: 100px;
    height: 100px;
    background-color: red;
}

类选择器
类选择器(.)：匹配指定类名对应的所有标签

.dd{
    font-size: 50px;
}

<div class="dd">d_1</div>

id选择器
id选择器(#)：匹配指定id名对应的唯一标签

#ele{
    color: blue;
}

总结

1.通配选择器一般用于整体reset操作（清除系统自定义样式）
*{
	margin: 0;
 }
2.标签与id选择器运用场景并不多，一般不提倡采用id选择器进行布局
3.类选择器为布局首选(建议基本全用class选择器进行布局)

基本选择器优先级:id>class>标签>通配

五、CSS常用属性和值

字体属性

font-family: 字体族科，多值用于备用，以,隔开

font-family: "STSong", "Arial";

font-size: 字体大小
font-style: 字体风格normal(普通，初始值) italic(斜体)oblique(倾斜)
font-weight:字体重量 normal(普通)bold(加粗)lighter(细)|100最细，900最粗
font-height: 行高，行高设置大于等于字体大小，字体在行高中垂直居中显示
font: [weight | style] size family` 为复合属性(推荐使用)

font:lighter italic 80mm "Calibri","微软细黑"

注：空格隔开多个值赋值，逗号隔开为一个值多值赋值
2. 字体属性

color 设置文字颜色
text-align 水平居中方式(left center right)
text-decoration 字划线(下划线：underline 中划线:line-through 上划线：overline)

text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;

letter-spacing：字间距
word-spacing：词间距
vertical-align：垂直对齐方式(一般用于图片和文字中间对齐)

baseline： 将支持valign特性的对象的内容与基线对齐 
sub： 垂直对齐文本的下标 
super： 垂直对齐文本的上标 
top： 将支持valign特性的对象的内容与对象顶端对齐 
text-top： 将支持valign特性的对象的文本与对象顶端对齐 
middle： 将支持valign特性的对象的内容与对象中部对齐 
bottom： 将支持valign特性的对象的文本与对象底端对齐 
text-bottom： 将支持valign特性的对象的文本与对象顶端对齐 
<percentage>： 用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。 
<length>： 用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。（CSS2）

text-indent：首行缩进
word-break规定自动换行的处理方式

normal        使用浏览器默认的换行规则。
break-all    允许在单词内换行。(遇到连体的英文，html将其解析为一个单词)
keep-all    只能在半角空格或连字符处换行。

Stargazer（仰望星空）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

文章目录css基础语法一、CSS格式二、CSS三种引入方式三、CSS的长度单位和颜色单位四、CSS选择器(基础)五、CSS常用属性和值css基础语法一、CSS格式选择器{ 属性名:属性值; 属性名:属性值;}选择器负责圈定范围，要修改的元素集合，花括号内的声明由属性名和属性值组成(key:value)的形式，用于设定具体样式二、CSS三种引入方式行间式(不推荐,不利于后期维护)<p style="color:red;">aaa</p>内联式&l
复制链接

扫一扫

专栏目录