网页前端学习第三次(HTML)--CSS

简介: 网页前端学习第三次(HTML)--CSS

1.css概述(美化网页)


CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

定义:选择器名{

               属性名:属性值;

               属性名:属性值;

               ,,,

                       }


注:

1.声明需要使用{}括起来。每个声明以分号结尾

2.一行建议一个声明

3.如果样式的属性值由多个单词组成,则用引号引起来


<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>
<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">
<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>
<h3>Look! Styles and colors</h3>
<div style="letter-spacing:12px;">Manipulate Text</div>
<div style="color:#40B3DF;">Colors
<span style="background-color:#B4009E;color:#ffffff;">Boxes</span>
</div>
<div style="color:#000000;">and more...</div>
</div>
</body>
</html>

368c7e1767bab183afac982727dae9da_watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5oOz56eD5aS055qE5a2m55Sf,size_20,color_FFFFFF,t_70,g_se,x_16.png


2.css的基本使用


 2.1.css基本语法


              2.1.1. 行内样式——直接写在标签上的样式,在标签上通过style属性定义的样式

                2.1.2.内部样式——定义在style标签中的样式,style标签一般设置在head标签中

               2.1.3.外部样式——定义在外部css文件中,要通过link标签引入


注:有多重样式时,越精准越优先。(就近原则)


       2.2.css注释


               /* 注释内容 */



3.css选择器


       3.1.基础选择器


               3.1.1.通用选择器——选择所有  *


                       *{


                               属性名:属性值;


                               属性名:属性值;


                               ,,,


                                       }                


               3.1.2.元素选择器——选择指定标签


                       元素名/标签名 {


                                       属性名:属性值;


                                               ,,,


                                                       }      


               3.1.3.ID选择器——选择设置过指定id属性值的元素         #


                                               #id属性值   {


                                       属性名:属性值;


                                               ,,,


                                                       }  


               3.1.4.类选择器——选择设置过指定class属性值的元素


                               .class属性值{


                                               属性名:属性值;


                                               ,,,


                                                       }


               3.1.5.分组选择器——当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔


                       选择器1,选择器2,...{


                                                        属性名:属性值;


                                                       }


       3.2.组合选择器


               3.2.1.后代选择器(派生选择器)——以空格分隔


                       选择指定元素的所有指定后代元素


                               选择器 指定元素{


                                                       属性名:属性值;


                                                       }


               3.2.2.子元素选择器——以大于号分隔


                      选择指定元素的第一代指定元素


                               选择器 > 指定元素{


                                                属性名:属性值;


                                                       }


               3.2.3.相邻兄弟选择器——以加号分隔


                      选择指定元素的下一个指定元素,两者有相同的父元素


                          选择器 + 指定元素{


                                                属性名:属性值;


                                                       }


                      3.2.4.普通兄弟选择器——以波浪线(~)分割


                                选择指定元素后面的所有指定元素                                      


                                       选择器 ~ 指定元素{


                                                属性名:属性值;


                                                       }


目录
相关文章
|
1月前
|
存储 移动开发 前端开发
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
69 0
|
2月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
2月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
1月前
|
数据安全/隐私保护 C++
【HTML】构建网页的基石
本文介绍了HTML的基本概念和常用标签,包括HTML文件的基本结构、常见标签(如标题、段落、换行、图片、超链接等)、表格与表单的使用方法,以及无语义标签div和span的特性。通过具体示例展示了如何在VS Code中快速生成HTML框架及各标签的应用场景,帮助初学者快速掌握HTML的基础知识。
48 1
【HTML】构建网页的基石
|
1月前
|
人工智能
|
2月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
34 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
1月前
html基础知识学习
html基础知识学习
33 0
|
2月前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
|
2月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。

热门文章

最新文章

下一篇
无影云桌面