CSS技术

最新推荐文章于 2024-05-30 21:17:17 发布

Andrew-Feng

最新推荐文章于 2024-05-30 21:17:17 发布

阅读量356

点赞数

分类专栏： web前端文章标签： CSS基础

本文链接：https://blog.csdn.net/qq_41650000/article/details/83352967

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS
层叠样式表单

网页的3个层：

内容层： HTML承载页面的内容表示层： CSS 的作用就是给网页做化妆的，实现显示效果行为层： JS 为网页添加程序行为

第一个CSS

如果使用错误的注释，会造成CSS效果显示失败。

CSS 的3种使用方式
内联式CSS：
直接写在元素的style属性中的css样式
具有最高的优先级别
只作用在当前元素上，不能复用的样式
网页内嵌式
使用 <style> 元素嵌入到页面中的CSS样式
作用在当前页面中的元素，可以在当前页面范围内复用
外部式

样式保存在.css文件中
使用 <link> 元素引用到当前页面中的样式
可以作用在所有引用了CSS文件的网页，可以在这些网页复用

CSS 样式的优先级
当内联样式，内部样式，外部样式，等多个样式作用在同一个元素时候，元素最终优先采用的样式。称为样式的优先级。

浏览器（用户代理）默认样式优先级最低。

内部样式，外部样式，哪个距离元素近，哪个优先

内联样式优先级最高

CSS 继承特性
元素有父子嵌套关系时候，外层设置的可继承CSS属性，可以被子元素继承。

常见的可继承属性：颜色，字体等

CSS 语法
选择器
元素选择器：使用元素名选择全部的同类元素

p {color: red}
id 选择器：使用#id选择页面中唯一的一个元素

网页中的ID属性应该唯一

#menu {color: red}
类选择器：使用.class 选择一组具有相同class属性的元素

.error {color: red}
一个元素上可以使用多个class，绑定多个类选择器样式

派生选择器：利用元素的层级关系选择元素，绑定样式

子孙后代选择

/* 选择 ul 中全部的子孙li元素 */
ul li {color: red;}
子选择

/* 选择 ul的li的ul的li 元素 */
ul>li>ul>li {color: #ddd}
选择器组：为了给一组元素设置一致样式，可以使用组选择器

h1, h2, h3, h4, h5 {boder-bottom: 1px solid #ddd;}

相当于

h1{boder-bottom: 1px solid #ddd;}
h2{boder-bottom: 1px solid #ddd;}
h3{boder-bottom: 1px solid #ddd;}
h4{boder-bottom: 1px solid #ddd;}
h5{boder-bottom: 1px solid #ddd;}
伪类选择器：用于设置元素的不同显示状态时候的效果

鼠标悬停：hover 用于设置鼠标停留在元素上面时候的显示效果。
复合使用选择器：id，类，元素，伪类等选择器可以组合使用

p.error 选择p元素，其class属性包含 error
p.error:hover 选择p元素，其class属性包含 error 并且设置鼠标悬停在上方的效果
CSS 常用属性
关于值的单位
常用属性值：

px 像素
em 字体大小
% 百分比
颜色字面量 red blue 等
16进制RGB颜色如： #48547d
文本相关属性
文字的缩进

text-indent: 2em; /* 文本缩进2个字符 */
设置字体大小

font-size: 12px;
行高

line-height: 1.6em;
设置文字颜色

color: #48547d;
块元素中的文本居中

text-align: center; /* 块元素中的文本居中 */

CSS
Box（盒子）模型
盒子模型：页面元素绘制时候其占用空间方式

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">

#box{
margin: 8px; /* 设定外边距，盒子与盒子之间的距离 */
}
#box2{
/* id选择器优先于类选择器 */
border: 3px dashed #00f; /* 设定边框，盒子皮的厚度 */
/* margin: 18px; */ /* 对四个边同时设置外边距 */
/* margin-left: 8px;*/ /* 单独设置左侧外边距 */
/* margin-right: 8px; */
/* margin-top: 18px; */
/* margin-bottom: 8px; */

/* margin: 上右下左; 单行设置4边属性，从后向前
可以省略数值，如果省略则使用对边代替*/
margin: 18px 8px 8px ;
}
.demo{
/* 利用类选择器复用样式 */
width: 100px; /* 设定内容区域的宽 */
height: 80px; /* 设定内容区域的高 */
padding: 20px;/* 设定内边距，内容与盒子边界的缝隙 */
border: 3px dashed #ddd; /* 设定边框，盒子皮的厚度 */
/*背景绘制在内边距之内，外边距范围不绘制背景*/
background-color: #ff0;
}
</style>
</head>
<body>
<h1>盒子模型</h1>
<div id="box" class="demo">范传奇呵呵</div>
<div id="box2" class="demo">盒子外边距相互侵占</div>
</body>
</html>

Andrew-Feng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS技术

CSS层叠样式表单网页的3个层：内容层： HTML承载页面的内容表示层： CSS 的作用就是给网页做化妆的，实现显示效果行为层： JS 为网页添加程序行为第一个CSS&lt;style type="text/css"&gt;/*** 第一个CSS ***/p{color: red}&lt;/style&gt;CSS 注释css 中只能使用 /* */ 注释，不能使...
复制链接

扫一扫