网页前端学习第三次(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天前
|
前端开发
|
1天前
|
缓存 前端开发 JavaScript
优化前端性能:提升网页加载速度的10个技巧
在当今互联网时代,网页加载速度已成为用户体验的重要指标之一。本文将介绍10个有效的前端优化技巧,帮助开发人员提升网页加载速度,提升用户体验,包括减少HTTP请求、压缩资源、优化图像等方面的实用建议。
|
3天前
|
Web App开发 缓存 前端开发
如何优化前端网页加载速度:最佳实践和工具推荐
本文探讨了如何通过采用最佳实践和利用先进的工具来优化前端网页加载速度。从压缩资源到使用CDN,从减少HTTP请求到利用缓存策略,我们将介绍一系列提高网页性能的技术手段。同时,我们还将推荐一些广受好评的工具,帮助开发者更轻松地实施这些优化策略。
|
4天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
5天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
16 0
HTML5/CSS3粒子效果进度条代码
|
7天前
|
前端开发 JavaScript UED
如何优化前端网页加载速度
在当今互联网时代,网页加载速度是用户体验的关键因素之一。本文将探讨如何通过优化前端技术,提升网页加载速度,包括压缩资源、使用CDN加速、减少HTTP请求等方法。
|
8天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践
23 1
|
12天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
12天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
13天前
|
JavaScript 前端开发
【Web 前端】网页上有 5 个div元素,如何使用JQ来选择它们?
【5月更文挑战第1天】【Web 前端】网页上有 5 个div元素,如何使用JQ来选择它们?