4、CSS：层叠样式表

最新推荐文章于 2023-07-20 17:15:10 发布

Java_XiaoBL

最新推荐文章于 2023-07-20 17:15:10 发布

阅读量206

点赞数

分类专栏： Java基础

本文链接：https://blog.csdn.net/weixin_48512144/article/details/106745667

版权

Java基础专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一、简介

1、CSS和HTML的关系

HTML用于构建网页的结构
CSS用于构建HTML元素的样式
HTML是页面的内容组成，CSS是页面的表现

2、CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

3、CSS注释

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

二、CSS的引入方式

1、内联样式（行内样式）

哈哈哈

特点：缺乏整体性和规划性，不利于维护，维护成本高。

2、内部样式

适用于对单个文档进行修饰

特点：单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

3、外部样式

可以将某一样式，应用于多个页面进行修饰。

引用方式：<link rel="stylesheet" type="text/css" href="xxx.css">

特点：提高代码的重用性、可扩展性

4、CSS的优先级：就近原则

三、选择器

1、基本选择器

元素选择器

p{
    font-size:14px;
}

所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。

无论这个标签藏的多深，一定能够被选择上。

选择的所有，而不是一个。

类选择器

<head>
    <style>
        .wenzi{
            width:800px;
        }
    </style>
</head>
<body>
    <h2 class="wenzi">哈哈哈</h2>
</body>

class属性的特点：

特性1：类选择器可以被多种标签使用。

特征2：类名不能以数字开头

ID选择器

<head>
    <style>
        #wenzi{
            width:800px;
        }
    </style>
</head>
<body>
    <h2 id="wenzi">哈哈哈</h2>
</body>

特别强调的是：HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！ID名字不能以数字开头。

基本选择器优先级：id>class>元素

2、关系选择器

后代选择器：选择并设置位于 <div> 元素内部的每个 元素的样式

div p
{ 
    background-color:yellow;
}

子代选择器：选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

div>p
{ 
    background-color:yellow;
}

块级元素div、行内元素span

3、属性选择器

用于选取带有指定属性和值的元素。

input[type="text"][value="456"]{
    background-color: red;
}

4、伪类选择器

a:link{
    color:red;/* 未访问的链接 */
}
a:visited{
    color:black;/* 已访问的链接 */
}
a:hover{
    color:blue;/* 鼠标移动到链接上 */
}
a:active{
    color:orange;/* 鼠标按下时的链接 */
}

四、浮动

1、浮动初衷：

浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。

2、浮动语法：

float:left;向左浮动
float:right;向右浮动
float:none;默认值，不浮动

3、消除浮动影响

给浮动元素的父节点加入属性 overflow：hidden。

注意：这种情况下，父布局不能设置高度。

给父节点加一个高度，将粉色div“撑起来”。

前提：设置父标签合适的高度，前提必须确定子布局的高度，来计算父布局的合适高度，包裹住子布局。

五、定位

1、静态定位：static（默认值）

静态定位：没有定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列。

2、相对定位：relative

相对定位：相对于自己原位置进行定位，定位后保留占位，其他元素不会移动位置。

3、z-index

z-index：堆叠顺序属性，设置图片谁在上面。

注意：Z-index 仅能在定位元素上奏效，元素可拥有负的 z-index 属性值。

4、绝对定位：absolute

相对已经定位的父元素进行定位。

5、固定定位：fixed（适用于网页侧边栏）

六、盒子模型

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

Java_XiaoBL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4、CSS：层叠样式表

一、简介1、CSS和HTML的关系HTML用于构建网页的结构 CSS用于构建HTML元素的样式 HTML是页面的内容组成，CSS是页面的表现2、CSS语法CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:3、CSS注释CSS注释以 "/*" 开始, 以 "*/" 结束。二、CSS的引入方式1、内联样式（行内样式）哈哈哈特点：缺
复制链接

扫一扫