Skip to main content

CSS Basic Knowledge

CSS学习, 基础知识点记录

CSS介绍​

Cascading Style Sheets - 层叠样式表, 又叫级联样式表, 简称样式表 文件后缀为.css 用于HTML文档中元素样式的定义

CSS存在的唯一目的便是让网页具有美观一致的页面

CSS语法规则有两个主要的部分构成: 选择器+声明( 样式 )

  • 选择器通常是需要改变样式的HTML元素
  • 每条声明由一个属性和一个值构成

CSS引入方式​

内联样式style​

在相关的标签内使用style属性 style属性可以包含任何CSS属性

缺点: 维护成本高

<p style="background: orange; font-size: 24px;">CSS<p>

内部样式< style >​

使用标签<style> </style>在头部<head> </head>内 虽然具备了统一性和规划性, 但是维护多个页面间容易混乱

<head>
    <style> 
       h1 { 
           background: red; 
       } 
    </style>
</head>

推荐的外部样式< link >​

可以通过.css外部文档改变整个站点的外观 使用<link>标签链接到样式表 需要在文件头部声明

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

选择器​

选择器包含如下5个类型, 其优先级降序如下所示 内联样式(1000) > ID选择器(100) > 类选择器(10) > 元素选择器(1) > 全局选择器

全局选择器*​

与任何元素匹配, 优先级最低, 一般做样式初始化

*{
     margin: 0;
     padding: 0;
 }

元素选择器-本身​

HTML文档中的元素，p、b、div、a、img、body... 相同标签具有的共性

p{
    font-size:14px;
}

这里注意, 文本属性标签中<span> </span>没有特殊含义, 可以结合标签选择器

<p>练习<span>前端</span>, 为了搭建react做的博客</p>

span{
	color: red;
}

类选择器class .​

结合标签的class 属性名称,配合.定义 并且, 同一个标签可以使用多个类选择器

/*定义类选择器*/
.test1_oneclass{
	width:800px;
}

.test2_oneclass{
	color:red;
}

<h2 class="test1_oneclass">你好,一个类选择</h2>
<h2 class="test1_oneclass test2_oneclass">你好, 两个类选择</h2>

ID选择器id​

结合标签的 id 属性名称, 配置#实现 注意, id属性只能被使用一次, 否则在Js中调用会出问题, 就像C语言的变量一样

#mytitle{
    border:3px dashed green;
}

<h2 id="mytitle">你好</h2>

合并选择器class .,.​

为了代码结构更美观, 更具有逻辑, 使用语法: 选择器1,选择器2,...{ }

.header, .footer{
    height:300px;
}

字体属性​

颜色color​

四种表现格式, 其中rgba的第四个元素表示透明度

div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}

大小font-size​

chrome最小字体为12px

p {font-size:14px;}

粗细font-weight​

值描述
bold定义粗体字符
bolder定义更粗的字符
lighter定义更细的字符
100~900定义由细到粗 400等同默认，而700等同于bold
h1 {font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}

样式font-style​

值描述
normal默认值
italic定义斜体字

字体font-family​

font-family:"Microsoft YaHei";

背景属性​

属性描述
background-color设置背景颜色
background-image设置背景图片
background-position设置背景图片显示位置
background-repeat设置背景图片如何填充
background-size设置背景图片大小属性

颜色background-color​

<div class="box"></div>
.box{
    width: 600px;
    height: 600px;
    background-color: #fcc;
}

图像background-img​

默认情况, 放置在元素的左上角

<div class="box"></div>
.box{
    width: 600px;
    height: 600px;
    background-image: url("images/img1.jpg");
}

重复background-repeat​

设置如何平铺背景图像

值说明
repeat默认值
repeat-x只向水平方向平铺
repeat-y只向垂直方向平铺
no-repeat不平铺
.box{
    width: 600px;
    height: 600px;
    background-color: #fcc;
    background-image: url("images/img1.jpg");
    background-repeat: no-repeat;
}

大小background-size​

值说明
length设置背景图片的宽度和高度
第一个值宽度，第二个值高度
如果只是设置一个，第二个值auto
percentage计算相对位置区域的百分比
第一个值宽度，第二个值高度
如果只是设置一个，第二个值auto
cover保持图片纵横比
将图片缩放成完全覆盖背景区域的最小大小
剩余内容会裁掉
contain保持图片纵横比
将图像缩放成适合背景定位区域的最大大小
.box{
    width: 600px;
    height: 600px;
    background-image: url("images/img1.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* background-size: cover; */
    /* background-size: contain; */
}

方位background-position​

设置背景图像的起始位置，其默认值是：0% 0%

值说明
left top左上角
left center左 中
left bottom左 下
right top右上角
right center右 中
right bottom右 下
center top中 上
center center中 中
center bottom中 下
x% y%第一个值是水平位置, 第二个值是垂直位置
左上角是0% 0%，右下角是100% 100%
如果只指定了一个值，其他值默认是50%
默认是0% 0%
xpos ypos单位是像素
.box{
    width: 600px;
    height: 600px;
    background-color: #fcc;
    background-image: url("images/img1.jpg");
    background-repeat: no-repeat;
    background-position: center;
}

文本属性​

对齐text-align​

值描述
left文本居左排列，默认值
right把文本排列到右边
center把文本排列到中间
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

修饰text-decoration​

值描述
underline定义下划线
overline定义上划线
line-through定义删除线
h1 {text-decoration:overline} 
h2 {text-decoration:line-through} 
h3 {text-decoration:underline}

大小写text-transform​

值描述
captialize定义每个单词开头大写
uppercase定义全部大写字母
lowercase定义全部小写字母
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

首行缩进text-indent​

负值是允许的。如果值是负数，将第一行左缩进

汉字两个字缩进像素为30px

p{
	text-indent:30px;
}

表格属性​

生成2行1列的表格：table>tr*2>td*1{内容}

基础边框border​

/* 1px的黑色实线 */
table, td { border: 1px solid black; }

折叠边框border-collapse​

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

宽高width height​

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

列·垂直对齐vertical-align​

td { height:50px; vertical-align:bottom; }

列·表内填充padding​

表的内容中控制空格之间的边框

td { padding:15px; }

关系选择器​

后代选择器​

语法: E F{} 解读: E标签内的F类型, 全部生效

ul li{
    color:green;
}
<ul>
     <li>宝马</li>
     <li>奔驰</li>
</ul>
<ol>
     <li>奥迪</li>
</ol>

子代选择器>​

语法: E>F() 解读: 所有作为E元素的直接子元素F

div>a{
    color:red
}
<div> 
    <a href="#">子元素1</a>
    <p> <a href="#">孙元素</a> </p>
    <a href="#">子元素2</a>
</div>

相邻兄弟选择器+​

语法: E+F() 解读: 向下选择相邻的第一个兄弟元素，只能向下, 且为第一个

h1+p{
    color:red;
}
<h1>h1元素</h1> 
<p>第一个元素</p> 
<p>第二个元素</p>

通用兄弟选择器~​

语法: E~F() 解读: 向下选择相邻的所有兄弟元素，只能向下

h1~p{
    color:red;
}
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
EK's Notebook
© Copyright ©EK 2024 - 2025. Built with Docusaurus.
    Pages
    Func
    Socials