从零开始的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:两端对齐

如果针对的是字母和汉字,directiontext-align的效果完全一样。
如果针对的是数字,则directionrtl从右向左写,而text-alignright向右对齐

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;

伪类的分类

  1. 状态伪类
  2. 结构性伪类

状态伪类:我们选择的目标对象的状态发生变化时,进行的样式改变。
如:鼠标悬停后的状态变化,鼠标点击后的状态变化。

结构性伪类:

伪元素选择器

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注解

手把手 从零开始学习JAVA(入门基础)

从零开始的Java开发2-8-4 CSS定位:相对定位绝对定位固定定位与浮动

从零开始的Java开发2-9-1 JavaScript入门:语法JS对表单元进行设置事件与DOM