前端基础之CSS快速入门

Posted 2022-08-05 brf-test

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端基础之CSS快速入门相关的知识，希望对你有一定的参考价值。

前一篇写了我们的html的常用组件，当然那些组件在我们不去写样式的时候都是使用的浏览器的默认样式，可以说是非常之丑到爆炸了，我们肯定是不能让用户去看这样丑到爆炸的样式，所以我们在这里需要使用css样式来美化一下前面的组件，让我们的页面更美观。

在开始css这部分之前，我们需要先在此着重提一下div这个标签，div标签在网页的标准化布局上起到了决定性的因素，我们通过使用div+css，可以完美的让我们的每个组件去到它自己应该去的地方。

<div></div>

我们在学习css样式前，需要从css选择器开始学起

css选择器

css常用选择器用下面这几种

派生选择器
id选择器
class类选择器
属性选择器
元素选择器

1、派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

<style>
    div p
            color: red;
            font-size: 20px;
    
</style>

<div>
    <p>这是一个派生选择器的样例</p>
</div>

2、id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 “#” 来定义。

#idtest
    color: blue;
    font-size: 30px;



<div id="idtest">
    <span>这是一个id选择器的样例</span>
</div>

id 选择器和派生选择器，在现代布局中，id 选择器常常用于建立派生选择器。

#idtest span
    color: blue;
    font-size: 30px;

<div id="idtest">
    <span>这是一个id选择器的样例</span>
</div>

3、class类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。

.classtest
    color: blue;
    font-size: 30px;

<div class="classiest">
    <span>这是一个id选择器的样例</span>
</div>

4、属性选择器

对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。如下所示：

[title]

color:red;


<p title="liml">Hi!liml</p>
<p title="hello">Hi!hello</p>

[title=liml]

color:red;


<p title="liml">Hi!liml</p>
<p title="hello">Hi!hello</p>

5、元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

html color:black;
p color:gray;
h2 color:silver;

创建css

创建样式的方式有三种，第一是使用外部链接，第二种是使用内部的<style>标签，最后一种就是在标签的style属性中添加css样式。

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

<style>
p color:red
</style>

<p style:"color:red">

CSS样式

1、文本样式：

# 字体
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-style	设置字体风格。
    normal - 文本正常显示
    italic - 文本斜体显示
    oblique - 文本倾斜显示
font-weight	设置字体的粗细。
color    字体颜色


a:link - 普通的、未被访问的链接
#实例： 
a:link background-color:#B2FF99;

a:visited - 用户已访问的链接
# 实例
a:visited background-color:#FFFF85;

a:hover - 鼠标指针位于链接的上方
# 实例
a:hover background-color:#FF704D;

a:active - 链接被点击的时刻
# 实例
a:active background-color:#FF704D;

#行间距
pline-height: 200%

2、表格样式

border-collapse	设置是否把表格边框合并为单一的边框。
    separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
    collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
    inherit	规定应该从父元素继承 border-collapse 属性的值。

table-layout	设置显示单元、行和列的算法。
    automatic	默认。列宽度由单元格内容设定。
    fixed	列宽由表格宽度和列宽度设定。
    inherit	规定应该从父元素继承 table-layout 属性的值。

3、CSS框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式

技术图片

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

padding: 10px;
margin: 10px;
border: 1px solid red;

padding-bottom:1px;
padding-top:1px;
padding-left:1px;
padding-right:1px;

4、CSS定位

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow	设置当元素的内容溢出其区域时发生的事情。
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align	设置元素的垂直对齐方式。
z-index	设置元素的堆叠顺序。

首先从position来开始看，这里很重要；

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20″ 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

overflow常用值

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

前面我们层级说过块级和内联元素，块级会直接占满该行，而内联元素的会在当前行内继续填充内容。当然如果我们想让一个内联元素能够转换为块级，或者块级转换为内联，此时我们就可以使用display属性来完成了，下面的是display常用的元素

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）

li
	display:inline;
	width:50px;

li
	display:block;
	width:50px;


<ul>
	<li>列表1</li>
	<li>列表2</li>
	<li>列表3</li>
	<li>列表4</li>
	<li>列表5</li>
</ul>

以上是关于前端基础之CSS快速入门的主要内容，如果未能解决你的问题，请参考以下文章