网页前端学习第三次(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.普通兄弟选择器——以波浪线(~)分割


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


                                       选择器 ~ 指定元素{


                                                属性名:属性值;


                                                       }


目录
相关文章
HTML5实现好看的劳动节网页源码
HTML5实现好看的劳动节网页源码,劳动节网页,劳动节网页源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、劳动节介绍、劳动节由来、劳动节习俗、劳动节文化、劳动节活动、劳动节故事、劳动节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
59 4
|
2月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
60 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
28天前
|
HTML5实现好看的中秋节网页源码
HTML5实现好看的中秋节网页源码,中秋节网页,中秋节网页源码,节日网页大作业,作业源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、中秋节介绍、中秋节由来、中秋节习俗、中秋节文化、中秋节美食、中秋节故事、中秋节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
48 0
HTML5实现好看的中秋节网页源码
HTML5实现好看的端午节网页源码
HTML5实现好看的端午节网页源码,包含十个页面:网站首页、端午节介绍、由来、习俗、文化、美食、故事、民谣、联系我们及登录/注册。页面设计简洁美观,内容丰富,兼容手机端,代码规范且注释完整,易于扩展和修改。提供完整的源码下载和视频演示,方便学习和使用。
59 3
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
76 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
3月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
74 34
网页 HTML 自动播放下一首音乐
在 HTML5 中实现自动播放下一首音乐,通过管理音乐列表、操作音频元素和监听事件完成。创建包含多个音乐链接的列表,使用 `&lt;audio&gt;` 元素加载音乐,监听 `ended` 事件,在当前音乐结束时自动播放下一首。示例代码展示了如何使用 JavaScript 实现这一功能,确保无缝切换音乐。
(html在线预览cad图纸插件)网页CAD绘制条形码、二维码的教程
本文介绍了如何在mxcad中绘制条形码和二维码。对于条形码,首先根据应用场景选择合适的编码标准(如CODE39、EAN13等),通过编码规则将数据转换为二进制,并利用`McDbHatch`绘制条和空的组合,同时支持自定义实体及属性管理。 对于二维码,因其能存储更多信息且具备更强纠错能力,采用开源库QRCode.js进行编码处理,再通过`McDbHatch`绘制黑白矩阵,同样封装成自定义实体以便管理和扩展。文中还给出了完整的绘制流程与效果展示,包括创建二维码对象、设置参数、调用绘制方法以及最终的效果图。整个过程体现了灵活运用API与第三方库来实现复杂图形绘制的能力。
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
159 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等