css基础

最新推荐文章于 2024-07-25 22:09:37 发布

从来如此便对么

最新推荐文章于 2024-07-25 22:09:37 发布

阅读量102

点赞数

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

本文链接：https://blog.csdn.net/msnhce/article/details/107096559

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css基础

1、css声明

CSS声明总是以分号(;)结束，声明组以大括号({})括起来:

p {color:red;text-align:center;}

2、css注释

CSS注释以 “/" 开始, 以 "/” 结束

3、id和class选择器

id选择器：#

#para1
{
    text-align:center;
    color:red;
}

class选择器：.

.center {text-align:center;}

4、样式表

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部：

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

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表

<head>
    <style>
        hr {color:sienna;}
        p {margin-left:20px;}
        body {background-image:url("images/back40.gif");}
    </style>
</head>

内联样式

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

优先级顺序:
内联式 > 内部式 > 外部式

下列是一份优先级逐级增加的选择器列表:
通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式

5、background

CSS 背景属性

Property	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

6、文本、字体

CSS文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

CSS字体属性

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

颜色

CSS中，颜色值通常以以下方式定义:
十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

7、css链接

链接样式
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

8、盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

9、margin

CSS边距属性

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

简写属性
margin:100px 50px;

10、padding

p.padding
{
    padding-top:25px;
    padding-bottom:25px;
    padding-right:50px;
    padding-left:50px;
}

简写属性
为了缩短代码，它可以在一个属性中指定的所有填充属性。
Padding属性，可以有一到四个值：
padding:25px 50px 75px 100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px

padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px

padding:25px 50px;
上下填充为25px
左右填充为50px

padding:25px;
所有的填充都是25px

11、CSS分组和嵌套

分组

h1,h2,p
{
    color:green;
}

嵌套

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。

12、css display

隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
h1.hidden {display:none;}

13、对齐

元素居中对齐

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

文本居中对齐

.center {
    text-align: center;
    border: 3px solid green;
}

图片居中对齐

img {
    display: block;
    margin: auto;
    width: 40%;
}

从来如此便对么

关注

0
点赞
踩
0

收藏

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

css基础1、css声明CSS声明总是以分号(;)结束，声明组以大括号({})括起来:p {color:red;text-align:center;}2、css注释CSS注释以 “/" 开始, 以 "/” 结束3、id和class选择器id选择器：##para1{ text-align:center; color:red;}class选择器：..center {text-align:center;}4、样式表外部样式表(External style shee
复制链接

扫一扫

专栏目录