CSS

概述

1、CSS:Cascading Style Sheets,层叠样式表

2、标记性语言:增强控制网页样式,并允许将样式信息与网页内容分离

 

语法规则

<head>
    <!--style 标签专用于定义 CSS 样式代码-->
    <style type="text/css">
        标签1 {
            属性1: 值12;
            ……;
        }

        标签2 {
            属性2: 值12;
            ……;
        }
    </style>
</head>

1、选择器:浏览器根据选择器,决定受 CSS 样式影响的 HTML 元素(标签)

2、属性(property):改变的样式名,并且每个属性都有一个值,属性和值被冒号分开,并由 {} 包围,组成了一个完整的样式声明(declaration)

3、多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开,虽然最后一条声明的最后可以不加分号,但尽量在每条声明的末尾都加上分号

4、一般每行只描述一个属性

5、注释:/*注释内容*/

 

CSS 结合 HTML

1、嵌入样式表:在标签的 style 属性上,设置 key:value……; key:value……;,修改标签样式

(1)代码量庞大

(2)可读性差

(3)无复用性

2、内部样式表:在 head 标签中,使用 style 标签定义所需 CSS 样式

<head>
    <!--style 标签专用于定义 CSS 样式代码-->
    <style type="text/css">
        标签1 {
            属性1: 值12;
            ……;
        }

        标签2 {
            属性2: 值12;
            ……;
        }
    </style>
</head>

(1)只能同一页面内复用代码,不能多页面复用 CSS 代码

(2)维护困难

 3、外部样式表:把 CSS 样式写成一个单独 CSS 文件,再通过 link 标签引入即可复用

标签1 {
    属性1: 值12;
    ……;
}

标签2 {
    属性2: 值12;
    ……;
}
<head>
    <!--link 标签专门用来引入 CSS 样式代码-->
    <link rel="stylesheet" type="text/css" href="CSS 文件路径"/>
</head>

 

CSS 选择器

1、标签名选择器

(1)格式

标签名 {
    属性: 值……;
    ……;
}

(2)决定哪些标签被动使用样式

2、id 选择器

(1)标签可以定义 id 属性,用以区分标签

(2)格式

#id 属性值 {
    属性: 值……;
    ……;
}

3、class 选择器 / 类选择器

(1)class 属性用于分组,可以在多个标签中使用 ,不论是否为同类标签

(2)用于描述一组元素的样式

(3)格式

.class 属性值 {
    属性: 值……;
    ……;
}

4、组合选择器

(1)多个选择器共用同一个 CSS 样式代码

(2)格式

选择器1, 选择器2,……{
    属性: 值……;
    ……;
}

 

CSS 常用样式

1、字体颜色

(1)属性:color

(2)值:颜色名:red、rgb 值:rgb(255, 0, 0)、十六进制:#00F6DE

2、边框

(1)属性:border

(2)值:像素值、颜色等

3、宽度

(1)属性:width

(2)值:像素值:20px、百分比:20%

4、高度

(1)属性:height

(2)值:像素值:20px、百分比:20%

5、背景颜色

(1)属性:background-color

(2)值:颜色名:red、rgb 值:rgb(255, 0, 0)、十六进制:#00F6DE

6、字体大小

(1)属性:font-size

(2)值:像素值:20px

7、文字居中

(1)属性:text-align

(2)值:center

8、超链接去下划线

(1)属性:text-decoration

(2)值:none

 

盒子模型

CSS 框模型

1、Margin(外边距)):清除边框外的区域,没有背景颜色,是完全透明的

2、Border(边框):围绕在内边距和内容外的边框

3、Padding(内边距):清除内容周围的区域,所释放的区域将会受到元素背景颜色的填充

4、Content(内容):盒子的内容,显示文本和图像

 

position 属性

1、指定了元素的定位类型

2、static 值

(1)HTML 元素的默认值,即没有定位,遵循正常的文档流对象

(2)静态定位的元素不会受到 top、bottom、left、right 影响

3、relative 值

(1)相对定位元素的定位是相对其正常位置

(2)移动相对定位元素,但它原本所占的空间不会改变

4、fixed 值

(1)元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动

(2)Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持

(3)Fixed 定位使元素的位置与文档流无关,因此不占据空间

(4)Fixed 定位的元素和其他元素重叠

5、absolute 值

(1)绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

(2)absolute 定位使元素的位置与文档流无关,因此不占据空间

(3)absolute 定位的元素和其他元素重叠

6、sticky 值

(1)粘性定位,基于用户的滚动位置来定位

(2)粘性定位的元素是依赖于用户的滚动,在 position: relative、position: fixed 定位之间切换

(3)行为像 position: relative;当页面滚动超出目标区域时,表现像 position: fixed;它会固定在目标位置

(4)在跨越特定阈值前,元素定位表现为相对定位,之后为固定定位

(5)特定阈值:top、right、bottom、left 之一,即指定 top、right、bottom、left 之一,才可使粘性定位生效,否则其行为与相对定位相同

7、元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法

 

Float 属性

1、使元素向左或向右移动,其周围的元素也会重新排列

2、一般用于图像

3、元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。

(1)一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止

(2)浮动元素之后的元素将围绕它

(3)浮动元素之前的元素将不会受到影响

 

4、清除浮动

(1)元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性

(2)clear 属性指定元素两侧不能出现浮动元素

(3)使用 clear 属性往文本中添加图片廊

posted @   半条咸鱼  阅读(35)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示