从零开始的Java开发2-8-2 CSS入门:CSS选择器样式
Posted karshey
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从零开始的Java开发2-8-2 CSS入门:CSS选择器样式相关的知识,希望对你有一定的参考价值。
文章目录
CSS简介
CSS,即Cascading Style Sheets,层叠 样式 列表。
层叠,表示我们可以对一个标签、对象进行多次的、重复的格式设置。
CSS的作用:
- 结构域样式分离的方式,便于后期维护与改版
- 可以用多套样式,使网页有任意样式切换的效果
- 使页面载入得更快、降低服务器的成本
CSS基础
样式表分类:外部、内部、行内样式
样式文件结构:html中的任何标签都可以是样式选择器。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style type="text/css">
p
background-color: red;
font-size: 40px;
</style>
</head>
<body>
<p>https: //www.csdn.net/</p>
<p>CSDN</p>
<p>一些废话一些废话一些废话一些废话一些废话一些废话一些废话</p>
</body>
</html>
CSS选择器
作用:用来选择(找到)需要添加样式的位置
常用选择器:标签选择器、(归)类选择器class
类选择器要以.
开头。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style type="text/css">
p
background-color: red;
font-size: 40px;
.p1
font-family: 隶书;
background-color: blue;
font-size: 35px;
</style>
</head>
<body>
<p>https: //www.csdn.net/</p>
<p>CSDN</p>
<p class="p1">一些废话一些废话一些废话一些废话一些废话一些废话一些废话</p>
</body>
</html>
背景设置
scroll
:背景是随滚动条滚动
fixed
:背景不是随滚动条滚动
添加代码:
body
background-color: yellowgreen;
background-image: url("../img/2.jpg");
/*url(位置)*/
background-repeat: no-repeat;
/*图片不重复*/
background-attachment: scroll;
/*图片随文字滚动*/
background-position: top center;
/*图片在最上居中*/
使用外部样式表
外部样式表:新建一个文档,里面全写css
,然后通过link
插入到html
代码中。
作用:使网页的表示层与结构层彻底分离。
如:
<link rel="stylesheet" type="text/css" href="index.css">
link
:用于定义文档与外部资源的关系
rel
:是relationship的缩写,也就是“关系”
type
:定义css样式文件的类型
href
:引用具体的文件
如上面的代码可以改成:
这是html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" type="text/css" href="index.css">
</style>
</head>
<body>
<p>https: //www.csdn.net/</p>
<p>CSDN</p>
<p class="p1">一些废话一些废话一些废话一些废话一些废话一些废话一些废话</p>
</body>
</html>
这是css文件:
p
background-color: red;
font-size: 40px;
.p1
font-family: 隶书;
background-color: blue;
font-size: 35px;
body
background-color: yellowgreen;
background-image: url("../img/2.jpg");
/*url(位置)*/
background-repeat: no-repeat;
/*图片不重复*/
background-attachment: scroll;
/*图片随文字滚动*/
background-position: top center;
/*图片在最上居中*/
样式
文本类样式
颜色的表示方法:
- 英语单词
- 十六进制
- RGB
文本样式:对齐方式、文本修饰、文本转换、文本缩进等
作用:美化和修饰
ltr
:左对齐
rtl
:右对齐
justify
:两端对齐
如果针对的是字母和汉字,direction
和text-align
的效果完全一样。
如果针对的是数字,则direction
的rtl
是从右向左写,而text-align
的right
是向右对齐。
direction
:书写方向
capitalize
:首字母大写。
nem
:缩进n个字符的距离。
字体类样式
字体样式:font
系列。
作用:定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)
italic
:绝大多数可以变为斜体字(但有的不行——不过一般都是用这个)
oblique
:倾斜显示
列表样式
list-style-type
可以用到的值:
列表使用频率很高,经常用于菜单、规律性展示等应用场景。
伪类样式
通常情况,超级链接上设置的样式,称为伪类。
实际上,伪类是一种状态,超级链接是一种标签——它们经常一起使用。
- 伪类是用在超链接上的效果比较多,但超链接不是伪类。
- 伪类是选择器。
- 冒号:以后的是伪类
关于伪类选择器:
与超级链接相关的举例
html代码:
<body>
<a href="#">伪类</a>
</body>
css代码:
/*没被访问的时候*/
a:link
color: blue;
/*已经访问后*/
a:visited
color: greenyellow;
/*鼠标放上去的时候*/
a:hover
color: orangered;
font-size: 30px;
/*激活:点击的时候*/
a:active
color: darkblue;
伪类的分类
- 状态伪类
- 结构性伪类
状态伪类:我们选择的目标对象的状态发生变化时,进行的样式改变。
如:鼠标悬停后的状态变化,鼠标点击后的状态变化。
结构性伪类:
伪元素选择器
CSS其他选择器
class
选择器:.
开头id
选择器:#
开头
CSS选择器的优先级
- 选择的范围越小,优先级越高。
!important
一般不会使用,因为会干扰逻辑。- 如果同级别,则以后出现为准。
以上是关于从零开始的Java开发2-8-2 CSS入门:CSS选择器样式的主要内容,如果未能解决你的问题,请参考以下文章
从零开始的Java开发2-10-3 JSP入门:JSP介绍语法和页面重用
从零开始的Java开发2-8-3 CSS浮动:DIV盒子模型浮动
从零开始的Java开发2-10-2 Servlet入门:Servlet开发步骤请求参数的发送与接收Get和Post注解