【JAVA WEB】CSS

时间：2024-02-16 09:28:38

目录

CSS是什么？

基本语法规范

引入方式

 内部样式表

行内样式表

外部样式表

常用选择器的种类 

基础选择器

标签选择器

类选择器

id选择器

通配符选择器

复合选择器

后代选择器

伪类选择器

常用元素属性：

字体属性：

文本属性：

CSS是什么？

        层叠样式表(Cascading Style Sheets)。

        CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式与结构的分离。也就是控制页面的展示效果，而html决定页面的结构。

基本语法规范

        选择器+{一条/N条声明}

  1.  选择器决定针对谁修改（找谁）
  2.  声明决定修改啥（干啥）
  3. 声明的属性是键值对. 使用 ' ；' 区分键值对， 使用 ' :  ‘区分键和值

示例：

<!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 {
            color:blue;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p>p标签</p>
    <h1>h标签</h1>
</body>
</html>

引入方式

 内部样式表

        写在style标签中，嵌入到html内部，理论上style放到html的哪里都行，但是一般放到head标签中，如上述示例。

         优点：能够让样式和页面结构分离。

         缺点：分离的不够彻底，尤其是css内容多的时候。

行内样式表

<h1 style="color:green;font-size: 60px;">h标签</h1>

        当内部样式表和行内样式表冲突时，行内样式表优先级比内部样式表高，以行内样式表为准。

外部样式表

实际开发中最常用的方式。

  1. 创建一个css文件。
  2. 使用link标签引入css。

示例

        创建一个demo01.css文件

p {
    color:blue;
    font-size: 80px;
}

        在html文件中引入css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 -->
    <!-- rel属性表示引入的是一个样式表，href表示引入路径 -->
    <link rel="stylesheet"  href="./demo01.css">
</head>
<body>
    <p>demon01.css引入</p>
</body>
</html>

PS:解决了内部样式表的弊端

常用选择器的种类 

1.基础选择器：由单个选择器构成的

  • 标签选择器
  • 类选择器
  •  id选择器
  • 通配符选择器

2.复合选择器:把多种基础选择器综合运用起来

  • 后代选择器
  • 子选择器
  • 并集选择器
  • 伪类选择器

基础选择器

标签选择器

        即选择器为标签，例如下方代码就是 p 标签

p {
    color:blue;
    font-size: 80px;
}

类选择器

特点：

  • 差异化表示不同的标签
  • 可以让多个标签 都使用同一个标签

语法细节：

    类名用 ' . ' 开头

<style>

        .blue {

            color:blue;

        }

</style>

<div class="blue">猫</div>

<div >猫</div>

id选择器

和类选择器相似

  • css中使用#开头表示id选择器
  • id选择器的值和html中某个元素的id值相同
  • html的元素id不必带#
  • id是唯一的，不能被多个标签使用（和类选择器最大的区别）

<style>

        #cat {

            color:green;

            font-size: 90px;

        }

</style>

 <div id="cat">猫</div>

 <div >猫</div>

 

通配符选择器

使用 * 定义，选取所有标签

*{

         color:green;

         font-size: 90px;

 }

 页面的所有内容都会被更改，不需要被页面结构调用，开发中主要用于针对页面中所有的元素默认样式进行消除，消除边距

复合选择器

        将前面的基本选择器进行组合

后代选择器

        又称为包含选择器，选择某个父元素中的某个子元素。

元素1 元素2 {样式声明}

        元素1和元素2要使用空格分割

         元素1是父级，元素2是子级，只选元素2，不影响元素1

示例：

<style>

       .hobby li{

            color:blue;

            font-size:40px;

       }

</style>

 <ul class="hobby">

        <li>吃饭</li>

        <li>睡觉</li>

        <li>玩游戏</li>

 </ul>

 <ul>

        <li>吃饭</li>

        <li>睡觉</li>

        <li>玩游戏</li>

 </ul>

伪类选择器

        定义元素状态

示例：

<style>

       a{

        color:black;

       }

       /* 鼠标悬停 */

       a:hover {

        color:red;

       }

       /* 鼠标点击 */

       a:active {

        color:green;

       }

</style>

<div>

        <a href='#'>不跳转</a>

</div>

常用元素属性：

字体属性：

设置字体 

//字体类型

font-family:'宋体'；

//字体大小

font-size:40px;

//字体颜色

color:red;

color:#ff0000;     //  #两位红色像素点ff  两位绿色像素点00   两位蓝色像素点00

color:rgb(255,0,0);

//字体样式

font-style:oblique / italic;  // italic设置斜体   normal取消斜体 oblique设置倾斜

//字体粗细

font-weight:normal;  //可取值 normal默认值  bold粗体字符  bolder更粗的字符  lighter更细的字符 也可以直接写数字，400等同于normal，700等同于bold  inherit 从父元素继承字体的粗细

文本属性：

//对齐方式   /*lorm生成一长串句子*/

text-align: 值；   /*  center / left / right

//控制段落首行缩进

text-indent: 值；  //单位 px 或者 em  em表示当前一个文字的大小

//文本装饰

text-decoration: 值 ；  //underline下划线   none什么都没有（给a标签去掉下划线） ovrline上划线  line-through删除线

//行高

line-height: 值

相关文章