CSS基础、盒子模型、选择器

最新推荐文章于 2024-06-14 11:01:38 发布

Y76

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量230

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_67673170/article/details/124176173

版权

一、CSS基础

概念：层叠样式表是一种用来表现HTML文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

1.背景：background——color,image,repeat,position,attachment,clip

2.边框: border------style,width,color,radius（圆角边框），margin,padding

3.轮廓：outline------style,color(invert颜色反转）,width(thin medium thick),offset（在轮廓和边框之间添加空间）

４.文本:对齐方式：left　right　center

垂直对齐：vertical－align

文本方向：direction unicode-bidi

文字装饰：text－decoration：overline　line－through　underline

文本转换：text－transform　：uppercase　lowercase　capitalize（首字母大写）

文字间距：text－indent　首行缩进；letter－spacing　字符间距；line－height　行高；word－spacing字间距；text-shadow　文本阴影

５.字体：font－family　字体类型；font-style　字体样式；　font-weight　字体粗细；font－variant　字体变体；font-size　字体大小；

６．链接：未访问 a:link; 已访问 a:visited;悬停 a:hover;点击a:active;

7.列表：ｕｌ：无序列表；ｏｌ：有序列表

８.表格：border：设置边框；＜table＞＜ｔｈ＞＜ｔｄ＞都有单独的元素边框

　全宽表格：width　：１００％

合并表格边框：border－collapse（是否将表格边框合并折叠为单一边框）

分隔线：在＜ｔｒ＞＜ｔｄ＞间添加border，可在上下左右添加。

可悬停表格：在＜ｔｒ＞上使用　hover　，可以突出显示鼠标悬停表格行

条状表格：斑马纹效果　　　nth-child（even／odd）

响应式表格：在＜table＞附近添加“style＝overflow－ｘ：auto”元素，用＜ｄｉｖ＞包含。

二：盒子模型

1.组成：外边框 margin；边框border；内边框padding；内容content

2.边框颜色（border-color）：4个颜色：分别是上右下左边框颜色；2个颜色：第一个是上下边框颜色，第二个是左右边框颜色；3个颜色：第一个是上边框颜色，第二个是左右边框颜色，第三个是下边框颜色。

3.边框粗细（border-width）：属性值：thin，medium，thick，像素值

4.边框样式（border-style）：none 无边框； dotted 点； dashed 虚线；soild 实线；double 双线；

5.大小计算：左右内边框大小+内容左右大小；上下内边框大小+内容上下大小；

边框可以简写，同时设置边框颜色、粗细、样式等，顺序没有要求。

三、CSS选择器

1.类型：标签；类别; ID; 嵌套；集体；全局；

2.使用方法：标签 p；类别 class(.one);

<style>
p{font-size:10px;}
.one{font-size:20px;}
.two{font-size:30px;}
</style>

<body>
<p>类别一</p>
<p class="one">类别二</p>
<p class="two">类别三</p>
</body>

ID (#one);

<style>
#A{font-weight:bold;
font-style:italic;}
#B{text-decoration:underline;
letter-spacing:3em;}
</style>

<body>
<p id="A">文字文字</p>
<p id="B">文字文字</p>
</body>

嵌套(p span) ；

<style>
p span{
    font-weight:blod;
    font-size:30px;
}
</style>

<body>
<p>css是<span>层叠样式表</span>。</p>
</body>

集体(h1 p)；

<style>
p,h1{
    font-weight:blod;
    font-size:30px;
color:blue;
}
</style>

<body>
<h1>层叠样式表</h1>
<p>css是层叠样式表。</p>
</body>

全局(*)；

<style>
*{
    font-weight:blod;
    font-size:30px;
color:blue;
text-align:center;
}
</style>

<body>
<h1>层叠样式表</h1>
<p>css是层叠样式表。</p>
</body>

3.混合使用：多个class选择器混用，用空格分开；id和class混合使用（例如：<div id="my" class="one two three">......<div>);id选择器不可以多个同时使用。

Y76

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础、盒子模型、选择器

一、CSS基础1.背景：background——color,image,repeat,position,attachment,clip2.边框: border------style,width,color,radius（圆角边框），margin,padding3.轮廓：outline------style,color(invert颜色反转）,width(thin medium thick),offset（在轮廓和边框之间添加空间）４.文本:对齐方式：left　right　center垂直
复制链接

扫一扫