CSS-基础

最新推荐文章于 2024-03-12 10:33:36 发布

luckyliuqs

最新推荐文章于 2024-03-12 10:33:36 发布

阅读量142

点赞数

分类专栏：前端文章标签： CSS

本文链接：https://blog.csdn.net/qq_35507234/article/details/97613948

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

CSS定义

CSS（Cascading Style Sheet)层叠样式表。

插入CSS样式表

插入CSS样式表的方式有3种：

1.内联样式（Inline style)

在标签内部使用样式，如下所示：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
2.内部样式表（Internal style)

在文档头部的<style>标签定义内部样式表，如下所示：
<head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
        p{
            color:red;
        } 
    </style>
</head>
3.外部样式表（External style)

当样式需要应用于很多页面时，外部样式表将是理想的选择。使用文档头部的<link> 标签链接到样式表，如下所示：
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
多重样式的优先级（就近原则）

1.内联样式 > 内部样式 >外部样式 > 浏览器默认样式

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

2.内联样式 > ID 选择器 > 伪类 > 属性选择器 > 类选择器 > 元素(类型)选择器 > 通用选择器（*）

CSS注释

CSS注释以 "/*" 开始, 以 "*/" 结束

CSS选择器

1.id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。id唯一。如下所示：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
        #para1{
	        text-align:center;
            color:red;
        } 
    </style>
</head>
<body>
    <p id="para1">Hello World!</p>
    <p>这个段落不受该样式的影响。</p>
</body>
</html>
2.class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
        .center{
            text-align:center;
        }
    </style>
</head>
<body>
    <h1 class="center">标题居中</h1>
    <p class="center">段落居中。</p> 
</body>
</html>
3.元素(标签）选择器

在CSS样式中，使用HTML标签名来作为选择器。

4.通用选择器

使用*{...}来匹配 html 中的所有元素标签。

CSS组合选择符

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以>分隔）
相邻兄弟选择器（以+分隔）
普通兄弟选择器（以~分隔）

CSS背景

1.背景颜色：background-color

background-color 属性定义了元素的背景颜色。如下所示：
body {
    background-color:#b0c4de;
}
CSS中，颜色值通常以以下方式定义：

十六进制：如#ff0192
RGB：如rgb(255,0,0)
颜色名称：如red

2.背景图像：background-image

background-image 属性描述了元素的背景图像。默认情况下，背景图像以平铺重复显示，以覆盖整个元素实体。如下所示：
body{
    background-image:url('1.png');
}
背景图像水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。也可以通过设置repeat-x或repeat-y设置水平或垂直平铺。如下所示：
body{
    background-image:url('1.png');
    background-repeat:repeat-x;
}
背景图像设置定位与不平铺

使用background-position可以对图像进行定位，改变图像在背景中的位置；使用no-repeat设置图像不平铺。如下所示：
body{
    background-image:url('1.png');
    background-repeat:no-repeat;
    background-position:right top;
}
或者可以使用：background-position:100px 20px;指的是距离x轴100px，距离y轴20px。

CSS文本

文本属性如下所示：

属性描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align
设置文本的对齐方式

center:居中

justify:两端对齐

text-decoration
向文本添加修饰

overline：上划线

line-through：中间划线

underline：下划线

text-indent 设置文本缩进
text-shadow 设置文本阴影
text-transform
控制元素中的字母

uppercase：大写

lowercase：小写

capitalize：每个单词的首字母大写

unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	设置文本的对齐方式 center:居中 justify:两端对齐
text-decoration	向文本添加修饰 overline：上划线 line-through：中间划线 underline：下划线
text-indent	设置文本缩进
text-shadow	设置文本阴影
text-transform	控制元素中的字母 uppercase：大写 lowercase：小写 capitalize：每个单词的首字母大写
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

CSS字体

字体属性如下所示：

属性描述
font-family 指定文本的字体系列
font-size
指定文本的字体大小

字体大写可以设置为em或者px。1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

font-style
指定文本的字体样式

normal：正常

italic：斜体

oblique：倾斜的文字

font-variant 以小型大写字体或者正常字体显示文本。
font-weight
指定字体的粗细。

lighter：定义更细的字符。

normal：默认值。定义标准的字符。

bold：定义粗体字符。

bolder：定义更粗的字符。

也可以设置为具体数字：从100到900。400 等同于 normal，而 700 等同于 bold。

属性	描述
font-family	指定文本的字体系列
font-size	指定文本的字体大小字体大写可以设置为em或者px。1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
font-style	指定文本的字体样式 normal：正常 italic：斜体 oblique：倾斜的文字
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。 lighter：定义更细的字符。 normal：默认值。定义标准的字符。 bold：定义粗体字符。 bolder：定义更粗的字符。也可以设置为具体数字：从100到900。400 等同于 normal，而 700 等同于 bold。

CSS链接

1.链接的定义
<a href="url" target="_blank">链接说明文字</a>
2.链接样式状态

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

注意：a:hover 必须跟在 a:link 和 a:visited后面；a:active 必须跟在 a:hover后面

CSS列表属性

list-style-image 指定列表中的列表项标记的图像：
list-style-position 设置如何相对于对象的内容绘制列表项标记。
list-style-type 设置列表项标记的类型。

CSS盒子模型

如下：

CSS边框样式

border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

Display和Visibility

隐藏元素

display:none和visibility:hidden

将元素变为内联元素

display:inline;

将元素变为块级元素

display:block;

将元素变为内联块元素

display:inline-block

定位

position属性指定了元素的定位类型。有5个值如下所示：

static HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

relative
相对于原先的位置，所释放出来的空间不会被其他标签占用。

相对定位元素经常被用来作为绝对定位元素的容器块。

fixed 元素的位置相对于浏览器窗口是固定位置。即便窗口滚动它也不会移动：
absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素可能和其他元素重叠。

sticky sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。基于用户的滚动位置来定位。

Overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。有以下值：

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

Float

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

设置浮动

使用float:left/right/none等

清除浮动

使用clear:left/right/both/none等

透明度

透明度属性使用opacity:透明度;

luckyliuqs

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

list-style-image	指定列表中的列表项标记的图像：
list-style-position	设置如何相对于对象的内容绘制列表项标记。
list-style-type	设置列表项标记的类型。

border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

static	HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
relative	相对于原先的位置，所释放出来的空间不会被其他标签占用。相对定位元素经常被用来作为绝对定位元素的容器块。
fixed	元素的位置相对于浏览器窗口是固定位置。即便窗口滚动它也不会移动：
absolute	绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素可能和其他元素重叠。
sticky	sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。基于用户的滚动位置来定位。

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