Web前端CSS入门：隐藏显示、定位与样式分离

需积分: 13 143 浏览量更新于2024-09-08 收藏 115KB DOCX 举报

本篇笔记详细介绍了Web前端网页初级课程中的CSS（层叠样式表）部分，帮助学习者掌握CSS的基础概念和应用技巧。CSS是用于控制网页外观和布局的关键技术，它允许开发人员通过定义元素的样式，实现元素的隐藏与显示、精确定位，以及与页面内容的有效分离。 1. 引入CSS的方式： - **直接插入方式**：通过`style`属性在HTML元素内部添加CSS属性，如`<input style='color:red;background-color:black;>'`。 - **内部文档头方式**：使用`<style>`标签将CSS规则置于`<head>`部分，如`.class_name{color:red;}`。 - **外部文件引入方式**：通过`<link>`标签引用外部CSS文件，`<link rel='stylesheet' href='url' type='text/css' />`，便于管理并复用样式。 2. CSS基础语法： - 属性与值的组合：`property_name: property_value;` - 字体样式： - `font-family`设置字体类型，如`font-family: '隶书';` - `font-size`调整字体大小，可指定像素值或百分比，如`font-size: 12px` 或 `font-size: 20%`。 - `color`设置字体颜色，如`color: red;` - `font-weight`控制字体粗细，可用`normal`, `bold`, `bolder`, `lighter`等关键字。 - `line-height`设置行高，可指定像素值或相对于字体大小的比例。 - `text-decoration`定义文本装饰，如`none`, `underline`, `blink`, `overline`, `line-through`。 3. 高级特性： - **定位与布局**：CSS提供了一系列的定位方法，如`position: relative`, `absolute`, `fixed`等，用于精确控制元素在页面上的位置。 - **选择器**：除了基本的元素、类和ID选择器，还有伪类选择器如`:hover`, `:active`, `:visited`等，以及后代选择器、相邻兄弟选择器等，用于更精细地控制样式应用范围。 4. 注释与文档编写规范： - 使用`/* ... */`进行多行注释，方便代码理解和维护。 - 提倡清晰的命名规则和良好的组织结构，有助于团队协作和后期修改。掌握这些基础知识，对于初学者来说是构建美观、易维护的网页设计的关键。通过实践和不断学习CSS的更多高级特性，如响应式设计、CSS3新特性和CSS预处理器（如Sass或Less），可以进一步提升前端开发能力。

CSS

css 样式表 cascading style sheet 层叠样式表

<可以实现>

（1）元素的隐藏与显示

（2）元素的精确定位

（3）使元素与样式相分离

<如何使用>

*语法： property_name:property_value;

属性名属性值

*⑴ 直接插入方式：

style='property_name:property_value;'

eg: <input style='color:red;background-color:black;'/>

*⑵ 内部文档头方式：

……

</style>

① element_name{property_name:property_value;}

元素名称

② .class_name{property_name:property_vlaue;}

类名

③ #id_name{property_name:property_vlaue;}

id 名(保证在全文中独一无二)

*⑶ 外部文件引入方式：

链接引入的元素样式表

*样式表代码注释/* */

下载后可阅读完整内容，剩余6页未读，立即下载

xiachuxin123

粉丝: 0
资源: 2

Web前端CSS入门：隐藏显示、定位与样式分离

web前端.pdf 笔记

《网页设计与制作教程：Web前端开发》读书笔记模板.pptx

达16年Web前端开发精华笔记：HTML5-CSS3-JavaScript

初级WEB前端工程师视频教程.zip

Web：前端入门到进阶图文教程，超详细的Web前端学习笔记。从零开始学前端，做一名精致优雅的前端工程师。公众号“千古壹号”作者

web_basic-knowledge-study

初级java note笔记demo文档

css网站布局实录学习笔记第一部分

应用开发中涉及到的css和php笔记分享

NUXT SSR初级入门笔记(小结)

最新资源