CSS简单使用

最新推荐文章于 2022-12-15 12:04:53 发布

菜鸟-翡青

最新推荐文章于 2022-12-15 12:04:53 发布

阅读量4.8k

点赞数 4

分类专栏：前端技术文章标签： css html 样式盒子模型选择器

本文链接：https://blog.csdn.net/zjf280441589/article/details/51418832

版权

前端技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS简单使用

标签：前端技术

CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增强网页的显示效果. 即:CSS将网页内容与显示样式分离,增强了显示功能.

CSS与HTML结合

CSS与HTML结合的方式有四种:

style属性:
在每个HTML标签上均有一个style属性, 将样式直接写入标签:

<div style="background-color:red;color:green;">

<style/>标签:
使用HTML的<style/>标签,将CSS代码在<head/>内:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>IFS</title>
    <style type="text/css">
        div {
            background-color: coral;
            color: crimson;
        }
    </style>
</head>

@import引入:
在<style/>内用@import "CSS-path";引入CSS文件:

<style type="text/css">
    @import "style.css";
</style>

注意: 这种方式的浏览器兼容性较差, 不推荐.

<link/>引入:
使用头标签<link/>引入CSS是最常用的结合方式:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>IFS</title>
    <link rel="stylesheet" href="style.css">
</head>

注: 结合优先级:
根据书写顺序<由上到下,由外到内>,优先级<由低到高>,即:后加载优先级更高.

代码规范

选择器名称 { 属性名：属性值；属性名：属性值；…….}
- 属性与属性间用;隔开;
- 属性名与值间用:连接;
- 一个属性的多个值用空格隔开;

CSS选择器

选择器是CSS的核心,从最初的元素/class/id选择器,演进到伪元素/伪类,以及CSS3中提供的更丰富的选择器… 定位页面上的任意元素开始变得愈发简单.

基本选择器

CSS提供的基本选择器有三种:

标签选择器:
使用标签名作为选择对象:

div {
    background-color: aquamarine;
    color: coral;
}

class选择器:
可为每个HTML标签添加class属性以标识该元素:

<div class="form-class">
    ...
</div>

.form-class {
    background-color: beige;
    color: crimson;
}

注: class可以选用多个style:
<p class="div-class div-width-class">百度/阿里/腾讯</p>

ID选择器
可为每个HTML标签添加id属性以标识该元素:

<dl id="dl-id">
    <dt>Head</dt>
    <dd>Sub</dd>
</dl>

#dl-id {
    background-color: coral;
    color: crimson;
}

注:基本选择器优先级:
style属性 > ID选择器 > class选择器 > 标签选择器

扩展选择器

关联选择器:

<div><p>关联选择器</p></div>
<p>不关联</p>

HTML代码如上, 可以仅设置<div><p>元素内的样式而忽略单<p>元素内样式:

div p{
    color: crimson;
}

组合选择器:
组合选择器可将不同的标签设置成相同的样式:

div, p {
    color: darkblue;
}

伪元素选择器
伪元素选择器是CSS中已经提供一些样式,可直接引用,如超链接状态:

原始状态	鼠标悬停	点击	点击之后
:link	:hover	:active	:visited

<a href="http://www.taobao.com" target="_blank">淘宝</a>

/* 初始状态 */
a:link {
    background-color: blueviolet;
}

/* 悬停 */
a:hover {
    background-color: aqua;
}

/* 点击 */
a:active {
    background-color: crimson;
}

/*点击之后*/
a:visited {
    background-color: yellowgreen;
}

注意: 伪元素选择器浏览器兼容性较差.

CSS盒子模型

Box Model:盒子模型(又叫框模型),Box Model规定了元素框处理元素内容(element content)、内边距(padding)、边框(border)和外边距(margin)的方式.在HTML文档中,每个元素（element）都有盒子模型,所以在Web世界中(特别是页面布局中),Box Model无处不在:

注意在进行布局前需要将数据封装到一块DIV区域内.

边框 border

border[-*] : border-width || border-style || border-color

边框	描述
border	统一设置
border-top	上
border-bottom	下
border-left	左
border-right	右

<div class="box-div-class">
    百度/阿里/腾讯
</div>
<div class="box-div-class box-right-class">
    百度/阿里/腾讯
</div>

<style type="text/css">
    .box-div-class {
        width: 400px;
        height: 300px;
        /*盒子模型*/
        border: 5px solid brown;
    }

    .box-right-class {
        border-right: 3px dashed green;
    }
</style>

内边距 padding

padding[-*] : length
同border,使用padding可以统一设置,也可上下左右分别设置:

.box-padding-class {
    padding-left: 50px;
}

内边距padding又翻译成补白.

外边距 margin

margin[-*] : auto | length
同border,使用margin可以统一设置,也可上下左右分别设置:

.box-margin-class {
    margin-top: 50px;
}

外边距margin又翻译成边界.

CSS布局

布局漂浮

float : none | left | right

属性	作用
left	文本流向对象的右边
right	文本流向对象的左边

.float-left-class{
    float: left;
}

注意: 布局漂浮浏览器兼容性较差,不推荐使用.

布局定位

position : static | absolute | relative

属性	说明
static	默认值,无特殊定位,对象遵循HTML定位规则
absolute	将对象从文档流中拖出: 可以使用`left`/`right`/`top`/`bottom`等属性相对于其最接近的一个具有定位设置的父对象进行绝对定位,如果不存在这样的父对象,则依据`body`对象,而其层叠通过`z-index`属性定义
relative	对象不可层叠(不会把对象从文档流中拖出),与`absolute`一样可以使用`left`/`right`/`top`/`bottom`数据进行相对定位.

absolute

.position-class{
    position: absolute;
    left: 50px;
    top: 50px;
}

relative

.position-class{
    position: relative;
    left: 50px;
    top: 50px;
}

菜鸟-翡青

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS简单使用

CSS简单使用标签：前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增强网页的显示效果. 即:CSS将网页内容与显示样式分离,增强了显示功能.CSS与HTML结合CSS与HTML结合的方式有四种:style属性: 在每个HTML标签上均有一个style属性, 将样
复制链接

扫一扫