【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性

简介: 【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性

一、基本语法规范

选择器 + {一条/N条声明} 选择器决定针对谁修改 (找谁)

声明决定修改什么.。(干什么)

声明的属性是键值对.。使用 : 区分键值对, 使用 : 区分键和值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        p/*p就是选择器*/{
            color: red;/*color和font-size都是声明*/
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>hello world</p>
</body>
</html>

二、引入方式

2.1、内部样式表

       写在 style 标签中. 嵌入到 html 内部。理论上style放在哪里都可以,但一般放在head标签中。正如上面这个例子所示。这样做可以使页面结构和样式分离,但是分离地不够彻底,尤其是当style内部内容过多时。

2.2、行内样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        h1/*p就是选择器*/{
            color: red;/*color和font-size都是声明*/
            font-size: 30px;
        }
    </style>
</head>
<body>
 
    <h1 style="color: blue; font-size: 30px;">hello world</h1>
</body>
</html>

       通过 style 属性, 来指定某个标签的样式。行内样式表的优先级比内部样式表的优先级高,当行内样式表和内部样式表冲突时,遵循行内样式表的样式

2.3外部样式表(好用)

       将页面结构和样式完全分离,需要css文件时在通过link引入。以下代码请忽略h1标签。

<!-- demo01.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        h1/*p就是选择器*/{
            color: red;/*color和font-size都是声明*/
            font-size: 30px;
        }
    </style>
    <link rel="stylesheet" href="./demo02.css">
</head>
<body>
    <p>hello world</p>
 
    <h1 style="color: blue; font-size: 30px;">hello world</h1>
</body>
</html>
/* demo02.css */
p{
    color: red;
    font-size: 30px;
}

三、常用选择器的种类

3.1、类选择器(好用)

       差异化表示不同的标签。标签名内可以填写多个标签名(实现修饰效果的叠加),中间用空格隔开,可以让多个标签的都使用同一个标签修饰css文件内标签名以.开头类选择器同样可以使页面结构和样式完全分离。

<!-- demo2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <link rel="stylesheet" href="./demo2.css">
</head>
<body>
    <p class="study size">学习</p>
    <p class="streetworkout">健身</p>
    <p class="game size">打游戏</p>
</body>
</html>
/* demo2.css */
.game{
    color: red;
}
 
.study{
    color: blue;
}
 
.streetworkout{
    color: green;
}
 
.size{
    font-size: 80px;
}

3.2、id选择器

id 选择器的值和 html 中某个元素的 id 值相同。

html 的元素 id 不必带 #。

id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)。

一个标签也不能使用多个标签,否则可能出现不可知情况。

//demo3.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo3.css">
</head>
<body>
    <p id="fe">前端开发</p>
    <p id="de">后端开发</p>
</body>
</html>
//demo3.css
#fe{
    color: blue;
}
 
#de{
 
    color: aqua;
}

3.3、通配符选择器

使用 * 的定义, 选取所有的标签。可以用来设置背景色等属性。html样例代码同id选择器。

#fe{
    color: blue;
}
 
#de{
 
    color: aqua;
}
//设置背景色为blueviole
 
*{
    background-color: blueviolet;
}

3.4、复合选择器

选择某个父元素中的某个子元素,并可以避免冲突。起到嵌套使用的效果

//de4.html
<body>
    <ul class="aaa">
        <li class="bbb">吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ul>
</body>
//demo4.css
.aaa .bbb{
    color: red;
}

3.5、伪类选择器

让鼠标对标签进行不同操作时让标签具有不同的显示效果。

a:link 选择未被访问过的链接

a:visited 选择已经被访问过的链接

a:hover 选择鼠标指针悬停上的链接

a:active 选择活动链接(鼠标按下了但是未弹起)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo5.css">
 
    <style>
        a{
            color: aqua;
        }
        a:hover{
            color: blue;
        }
        a:active{
            color: chartreuse;
        }
    </style>
</head>
<body>
    <a href="#">跳转</a>
</body>
</html>

三、常用元素属性

设置字体(宋体,黑体......): font-family

设置字体大小:font-size: 20px

设置字体粗细:font-weight: bold/700

设置文字样式:font-style: italic;设置倾斜,font-style: normal;取消倾斜

文本对齐:text-align: [值]。center: 居中对齐 left: 左对齐 right: 右对齐

文本装饰:text-decoration: [值]。underline 下划线. none 啥都没有. 可以给 a 标签去掉下划线. overline 上划线. line-through 删除线

文本缩进:text-indent: [值]。使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小。

相关文章
|
2天前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
|
3天前
|
前端开发 容器
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
|
3天前
|
Web App开发 前端开发 编译器
CSS3私有前缀+新增盒模型相关属性(如果想知道CSS3私有前缀、新增盒模型相关属性的知识点,那么只看这一篇就足够了!)
CSS3私有前缀+新增盒模型相关属性(如果想知道CSS3私有前缀、新增盒模型相关属性的知识点,那么只看这一篇就足够了!)
|
3天前
|
前端开发 容器
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
|
18小时前
|
前端开发 JavaScript
web开发前端适配
web开发前端适配
4 0
|
12天前
|
传感器 小程序 搜索推荐
(源码)java开发的一套(智慧校园系统源码、电子班牌、原生小程序开发)多端展示:web端、saas端、家长端、教师端
通过电子班牌设备和智慧校园数据平台的统一管理,在电子班牌上,班牌展示、学生上课刷卡考勤、考勤状况汇总展示,课表展示,考场管理,请假管理,成绩查询,考试优秀标兵展示、校园通知展示,班级文化各片展示等多种化展示。
36 0
(源码)java开发的一套(智慧校园系统源码、电子班牌、原生小程序开发)多端展示:web端、saas端、家长端、教师端
|
10天前
|
前端开发 JavaScript Java
计算机Java项目|基于Web的足球青训俱乐部管理后台系统的设计与开发
计算机Java项目|基于Web的足球青训俱乐部管理后台系统的设计与开发
|
2天前
|
自然语言处理 前端开发 Java
Servlet与JSP:Java Web开发的基石技术详解
【6月更文挑战第23天】Java Web的Servlet与JSP是动态网页的核心。Servlet是服务器端的Java应用,处理HTTP请求并响应;JSP则是结合HTML与Java代码的页面,用于动态内容生成。Servlet通过生命周期方法如`init()`、`service()`和`destroy()`工作,而JSP在执行时编译成Servlet。两者在MVC架构中分工,Servlet处理逻辑,JSP展示数据。尽管有Spring MVC等框架,Servlet和JSP仍是理解Web开发基础的关键。
|
2天前
|
安全 编译器 PHP
探索PHP 8的新特性及其对现代Web开发的影响
【6月更文挑战第22天】随着PHP 8的发布,这一广泛使用的服务器端脚本语言迎来了重大升级。本文将深入探讨PHP 8引入的关键新特性,包括JIT编译器、联合类型、命名参数、匹配表达式以及错误处理和异常改进等。这些新特性不仅提升了性能,还增强了类型系统和语言的表达能力,为现代Web开发带来了新的机遇和挑战。我们将分析这些变化如何影响编码实践,优化策略,并讨论开发者如何适应这些变革以构建更快、更安全、更易于维护的应用程序。
|
2天前
|
搜索推荐 Java 数据库连接
探索Java Web开发:Servlet与JSP的协同工作原理
【6月更文挑战第23天】Java Web开发中,Servlet和JSP协同打造动态网站。Servlet是服务器端的Java程序,处理HTTP请求并执行复杂逻辑;JSP则结合HTML和Java,生成动态内容。Servlet通过`doGet()`等方法响应请求,JSP在首次请求时编译成Servlet。两者常搭配使用,Servlet处理业务,JSP专注展示,通过`RequestDispatcher`转发实现数据渲染。这种组合是Java Web应用的基础,即使新技术涌现,其价值仍然重要,为开发者提供了强大的工具集。