【Java Web】前端三剑客 之 CSS
source link: https://blog.51cto.com/panyujie/5447114
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
【Java Web】前端三剑客 之 CSS
推荐 原创
CSS的语法规则非常简单！
每一个CSS语句包含两个部分：选择器 + 应用属性。
内部样式表
内部样式表
<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p
上面的代码，就是最典型的例子。
其中 style 标签的内容，就是一个 CSS的代码。
内联样式 / 行内样式表
这种内联样式，是属于一种比较特殊的用法，通常会搭配 JS 来使用。
另外，这种写法只适合于样式特别简单的情况。
如果样式比较复杂，这里就会显得很乱。
内联样式只是针对当前元素生效。
也就是说，不需要写选择器，也不用写 {}，直接写CSS属性和值即可。
外部样式
这种样式，在实际开发中是用的最多的。
这种样式，就是把 CSS 代码给单独提取出来，放到一个 CSS 文件中。
然后在 HTML 代码量，通过 link 标签，来引入CSS文件
<link rel="stytlesheet" herf="test.css">
样式大小写
CSS 是不区分大小写，但是我们开发时统一使用小写。
HTML 和 CSS 一样，都是不区分大小写的，并且同时使用小写。
正是因为统一使用小写，所以在 CSS中 就不存在 “驼峰命名法”。
比如：将 hello world 挨在一起。小驼峰：helloWorld
大驼峰：HelloWorld
CSS里面通常会使用“脊柱命名法”：hello-world
也就是使用 - 号来进行分割单词。
首先，我们选择器的功能，就是选中页面的元素(标签)。
选择器可以一次选中一个，也可以一次选中一批。
选择器的分类
主分成
2 大类：1、
基础选择器(单个选择器构成的)2、
复合选择器(把多种基础选择器综合运用起来.)
1. 基础选择器
标签选择器
写的选择器，就是一个 HTML 的标签名
这个类选择器，可以说是我们最常使用的一个选择器，而且也是最灵活的。
通过 类选择器，我们可以随心所欲的选择任意想要的元素。
理论上来说：只要有这一种选择器就够了。
就是说：有了类选择器，其它的选择器都可以不用。
类选择器怎么创建？
首先，需要在 CSS 代码中，创建一个 类名。
在对应的 HTML 元素中，通过
.class 属性来引用这个类名此时，具有该类名的元素，就都会应用上相关 CSS 属性
id 选择器
id 选择器的用法，和类选择器有点相似。
但是，与类选择器相比，id选择器还是具有一定的局限性。想要使用 id 选择器，先给被选中的元素，设定一个 id 属性
首先，要注意 id 在 一个页面中，
是唯一的，不可重复的。因此，
id 选择器只能选中一个元素，不能选中多个元素。
通配符选择器
通配符选择比较简单，就是一个单单的 * 号
通配符，在将 MySQL的时候，概念相似比如 select 操作中，有一个 模糊匹配的操作，里面就涉及到 通配符的概念。
%： 代表 任意个字符【任意个：大小不做限制，可以是很大或者很小的数。包括0】，且每个字符又可以表示为任意字符(就是打牌中赖子一样，可以将它当做任意一张牌)。
_ ：下划线它只能代表一个字符，但是这一个字符是“赖子”，即：可以表示任意字符。
CSS中 * 号，也是类似。
起到的作用：
直接选中了页面上的所有元素
最大的用途就是：取消浏览器的默认样式
2.复合选择器
复合选择器，其实就是把上面的基础选择器，进行了组合操作。
通过这个组合，来完成更方便选择元素的一个效果
后代选择器：可以通过多个选择器的组合，能够选中 某个元素里面的子元素，孙子元素(后代元素)子选择器：通过多个选择器的组合，能够选中某个元素里面的子元素.
后代选择器
后代选择器：
ul .name{
color: red;
}
子代选择器
子代选择器
ul >.name{
color: red;
}
这两个有什么区别？
并集选择器
并列的写多个选择器
中间使用逗号来分割
伪类选择器
这个选择器，就不展开介绍了
伪类选择器，其实它是属于一些特殊场景的应用。
伪类选择器个数：选择器 + 冒号 + 不同元素的状态+{应用属性}。
比如：链接伪类选择器
a:link选择未被访问过的链接a:visited选择已经被访问过的链接a:hover选择鼠标指针悬停上的链接a:active选择活动链接(鼠标按下了但是未弹起)
link 和 visited 不常用。
hover 和 active 比较常用
我演示两个：
弹性布局 ( flex )
弹性布局，主要是安排页面上的元素的 位置 / 排序方式。
默认的网页布局，是从上到下的。（尤其是块级元素独占一行）
实际中的网页不仅仅需要从上到下，也需要从左到右。所以，我们就可以
借助弹性布局，既能完成 水平方向的布局，又能完成垂直方向的布局
先来看水平方向的布局
举例：
通过
水平方向排列方式查看 弹性布局
justify-content ：
flex 布局中的最常见的三种操作：
1、
设置为弹性布局 – display: flex来实现2、设置
水平方向的排序 – justify-content: flex-start/center/flex-end3、设置
垂直方向的排序 – align-items: flex-start/center/flex-end
基于上述内容，就可以实现一些主流的页面布局效果了
实现一个典型的页面最典型的布局
下面我们就来基于 弹性布局，来实现出这样的一个页面布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于弹性布局: 实现典型的页面结构</title>
</head>
<body>
<style>
*{
/* 外边距设置为 0 */
margin: 0;
/* 内边距设置为 0 */
padding: 0;
/* 盒子模型，保证不影响页面排版 */
box-sizing: border-box;
}
.navigation{
/* 宽度设置页面的宽度 */
width: 100%;
/* 高度一般为50px */
height: 50px;
/* 当行背景，取自本题图片城市 */
background-image: url(城市.jpg);
/* 字体颜色 白色 */
color: white;
/* 文本居中 */
text-align: center;
/* 文本垂直居中 */
line-height: 50px;
/* 字体大小：20像素 */
font-size: 20px;
/* 字体样式：楷体 */
font-family: "楷体";
}
.container{
width: 100%;
height: 1000px;
background-image: url(城市.jpg);
/* 字体颜色 白色 */
color: white;
/* 字体大小：20像素 */
font-size: 20px;
/* 字体样式：楷体 */
font-family: "楷体";
display: flex;
justify-content: center;
align-items: center;
}
.container .left, .container .right{
height: 100%;
width: 8%;
background-image: url(海.jpg);
}
.container .content{
height: 100%;
/* 左右边框占16% */
width: 84%;
background-image: url(城市.jpg);
background-size: cover;
}
</style>
<div class="navigation">导航栏</div>
<div class="container">
<div class="left">
左侧边栏
</div>
<div class="content">
内容区域
</div>
<div class="right">
右侧边栏
</div>
</div>
<div class="footer">
页脚
</div>
</body>
</html>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK