资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端学习记录（CSS篇）

前端学习记录（CSS篇）

skinner / 3317人阅读

摘要：，层叠样式表，将网页内容和显示样式分离，提高程序性能。它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小颜色以及元素的精确定位。用于控制与之间的距离。

CSS

Cascading Style Sheet，层叠样式表，将网页内容和显示样式分离，提高程序性能。

它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位。在传统的web网页设计里，使得css能让单调的html网页更富表现力。


css的引入方式

css可以控制html文档的显示，但是控制文档显示之前，首先应在需要显示的html文档中引入css样式表，html提供了以下四种引入方式：

（1）内联样式：将样式内联定义到具体的html元素上，利用元素的style属性实现，通用用于精确控制一个html元素的表现。



内联样式

（2）内部样式：通常在html文档头部定义样式单部分来实现，这种方式下每批css样式只控制一份html文档。

（3）外链样式：样式文件和html文档分离，样式文件需要额外引入，这种方式下每批css样式能控制多份html文档（最常用）。

（4）导入外部样式：和第三种方式类似，只是使用@import来引入外部样式表文件。

优先级：内联样式style> 内部样式 > 导入外部样式import > 外链样式link


css常用选择器介绍

定义css样式的语法总遵循如下格式：

Selector{
    property1: value1;
    property2: value2;
}

Selector：选择器，决定该样式的定义对哪些元素起作用
{property:value...}：属性定义，决定这些样式起怎样的作用（字体、颜色、布局等）

标签选择器：声明哪种标签会使用该css样式

/* E{....}，其中E代表有效的html元素 */
a{
    background-color: blue;
    color: red;
}

class选择器：声明特定class值的标签会使用该css样式（一个标签可以设置多个class值）

/* [E].classValue{....}，其中E表示html元素，当E存在时，指定的范围是标签为E且属性class的值为classValue，不存在时，范围是标签属性class的值为classValue */
.p2{
    background-color: yellow;
    color: gray;
}

id选择器：声明特定id值的标签会使用该css样式（一个标签只能设置一个id值）

/* [E]#idValue{....}，同class选择器概念，E可存在或不存在 */
#id1{
    background-color: gray;
    color: white;
}

组合选择器：将具有相同css样式的选择器，一次性声明（不限于标签选择器，class选择器和id选择器也可以组合）

/* Selector1, Selector2, Selector3{....}，Selector都是有效的选择器，可以是标签选择器、class选择器、id选择器等 */
span, b, #id1{
    color: red;
}

嵌套选择器：也叫关联选择器（不只是标签选择器能嵌套，class选择器和id选择器也可以）

/* Selector1 Selector2{....}，Selector都是有效的选择器，表示当前需要设定样式的范围是Selector1选择器下所有的Selector2选择器*/
div p{
    background-color: green;
    color: white;
}


常用的css属性介绍

字体
font-family：规定文本的字体系列，如"serif"、"sans-serif"等
font-size：规定文本的字体尺寸
font-style：规定文本的字体样式，主要有normal,italic,oblique
font-weight：规定字体的粗细，主要有normal,bold,自定义粗细

文本
color：设置文本颜色
letter-spacing：设置字符间距（每个字母间的间距）
line-height：设置文本行高
text-align：设置文本的对齐方式，只有left, right, center
text-decoration：设置文本的装饰效果，主要有overline（上划线）, underline（下划线）, line-through（删除线）
text-indent：设置文本看首行缩进
text-transform：设置文本的大小写，主要有uppercase, lowercase, capitalize
word-spacing：设置单词间距

边框
border：在一个声明中设置所有的边框属性
border-color：设置四条边框的颜色
border-style：设置四条边框的样式，只要有dotted, solid, double, dashed等值
border-width：设置四条边框的宽度
边框分为：border-left、border-right、border-top、border-bottom
border-left：在一个声明中设置所有左边框属性，对应还有border-right等
border-left-color：设置左边框颜色
border-lelft-style：设置左边框样式
border-left-width：设置左边框宽度

可以将属性一次性写在一起，更方便
border: 10px red solid;

背景
background：在一个声明中设置所有的背景属性
background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动，主要有fixed和scroll两个值
background-color：设置元素的背景颜色
background-image：设置元素的背景图片，主要有url和none两个属性
background-position：px, % 设置背景图像的开始位置，可以指定top left等，也可以指定具体的像素位置
background-repeat：设置是否及如何重复背景图像，主要有repeat, repeat-x, repeat-y, no-repeat

列表
list-style：在一个声明中设置所有的列表属性，设置成none可以去掉ul中的原点等属性值
list-style-image：将图像设置为列表项标记，主要有url值
list-style-position：设置列表项标记的放置位置，主要有outside和inside两个值
list-style-type：设置列表项标记的类型，主要有disc, circle, square, decimal等，不能和list-style-image同时使用

表格
border-collapse：设置是否把表格边框合并为单一的边框，值为collapse
border-spacing：设置分割单元格边框的距离，与border-collapse不能同时使用
caption-side：设置表格标题的位置
empty-cells：设置是否显示表格中的空单元格，值为hide, show

常用伪类别属性
超链接标签

`a:link` 超链接的普通样式
`a:visited` 被点击过的超链接样式
`a:hover` 鼠标指针经过超链接上时的样式
`a:active` 在超链接上单击时，既"当前激活"时超链接的样式

块级标签->行级标签：display:inline
行级标签->块级标签：display:block
注：行级标签是默认情况下是不能设置宽度和高度的，如果要设置，需要把行级标签变成块级标签


盒子模型

我们可以把页面中的元素都可以看作一个盒子，占据着一定的页面空间，这些占据的空间往往比单纯的内容要大，换句话说，我们可以调整盒子的边框和距离的参数来调整盒子的位置。

盒子宽度：content+padding+border+margin

因此我们可以利用好盒子的这些属性，就能很好的实现各种各样的排版效果。

border属性主要有3个，border-color, border-width, border-style，通常在设置border时常常将3个属性进行很好的配合，才能达到良好的效果。

padding用于控制content与border之间的距离。
padding：一次性将四个边距全部设置（上右下左，顺时针）
padding-top：上边距
padding-bottom：下边距
padding-left：左边距
padding-right：右边距

margin指的是元素与元素之间的距离。
margin：一次性将四个边距全部设置（上右下左，顺时针）
margin-top：上边距
margin-bottom：下边距
margin-left：左边距
margin-right：右边距

注：

两个行级元素之间的距离是margin-left和margin-right两者的和，两个块级元素之间的距离不是margin-top和margin-bottom的和，而是两者之中的较大值。

其实margin除了设置正数以外，也可以设置负数，当设置为负数时，会使得块向反方向移动，甚至覆盖在另外的块上。

当块之间是父子关系，通过设置子块的margin为负数时，可以使得子块从父块中"分离出来"


元素的定位

网页中各个元素都必须有自己的位置，从而搭建出整个页面的结构。

`float`：值为`left`, `right`或者默认值`none`，当设置了元素向左浮动或向右浮动时，元素会向其父元素的左侧或右侧靠近
`clear`：设置块元素的`clear`属性清除对`float`的影响，值为`left`, `right`, `both`
`position`：制定块的位置，即块相对于其父块的位置和相对它自身应该在位置，值有`absolute`, `fixed`, `relative`, `static`
当将子块的`position`设置为`absolute`时，子块已经不再从属于父块，其边框设置的距离是相对页面`body`的距离，而不是父块的距离
当将块的`position`参数设置为`relative`时，与将其设置为`absolute`时完全不同，这时子块时相对于自身在父块的原先位置来进行定位的。

定位资料参考：http://www.cnblogs.com/dolphi...

云服务器 GPU云服务器 一篇深度学习 前端css css前端 前端css框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113401.html

相关文章

  • 前端面试系列--前言篇

    摘要：这个系列的文章将记录我准备春招的整个过程，我会将自己学习到的新知识记录在这个系列里文章目录前言说明准备方向目标前言说明作为半个科班出身学数学的应届生，在学习计算机的时候还是比较吃力的，从今年月份开始接触前端，到现在也有个月左右了。 这个系列的文章将记录我准备春招的整个过程，我会将自己学习到的新知识记录在这个系列里 文章目录 前言说明 准备方向 目标 前言说明   作为半个科班出身...

    sshe 评论0 收藏0

  • 前端面试系列--前言篇

    摘要：这个系列的文章将记录我准备春招的整个过程，我会将自己学习到的新知识记录在这个系列里文章目录前言说明准备方向目标前言说明作为半个科班出身学数学的应届生，在学习计算机的时候还是比较吃力的，从今年月份开始接触前端，到现在也有个月左右了。 这个系列的文章将记录我准备春招的整个过程，我会将自己学习到的新知识记录在这个系列里 文章目录 前言说明 准备方向 目标 前言说明   作为半个科班出身...

    zsirfs 评论0 收藏0

  • 前端面试系列--前言篇

    摘要：这个系列的文章将记录我准备春招的整个过程，我会将自己学习到的新知识记录在这个系列里文章目录前言说明准备方向目标前言说明作为半个科班出身学数学的应届生，在学习计算机的时候还是比较吃力的，从今年月份开始接触前端，到现在也有个月左右了。 这个系列的文章将记录我准备春招的整个过程，我会将自己学习到的新知识记录在这个系列里 文章目录 前言说明 准备方向 目标 前言说明   作为半个科班出身...

    Freelander 评论0 收藏0

  • 前端学习记录（HTML篇）

    摘要：如果在元素内点击文本，就会触发，浏览器会自动将焦点转到和标签相关的表单控件上。在用户使用具体某种方式加入付费会员时，须阅读并确认相关的用户协议和使用方法。在之前，主要提供两种元素来进行多媒体的展示，一个是标签，另一个是标签。 HTML Hyper Text Markup Language，超文本标记语言，不是一种编程语言，而是一种标记语言 思想：网页中有很多数据，不同的数据可能需要不同...

    gplane 评论0 收藏0

  • iOS转前端的学习记录

    摘要：我的第一个项目是一个基于和的后台管理系统，当时我还没有任何的前端开发知识，时间也比较紧，就在学习和的基础后，有针对性的对和进行了了解。 第一篇博文，写在从零开始学前端的两个月后，期间经过了春节，之后又经历了一些动荡。算是在边做边学中坚持下来，现在基本上可以完成一些业务逻辑上的开发工作。想到应该总结一下这两个月的学习，也是对自己的知识掌握情况做一个梳理。 我的第一个项目是一个基于vue和...

    Pines_Cheng 评论0 收藏0

发表评论

登陆后可评论

0条评论

skinner

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<