javaEE-10.CSS入门

news2025/4/22 21:53:04

一.什么是CSS

编辑二.语法规则:

三.使用方式

1.行内样式:

2.内部样式:

3.外部样式:

空格规范 :

四.CSS选择器类型

1.标签选择器

2.类选择器

3.ID选择器

4.通配符选择器

5.复合选择器

五.常用的CSS样式

1.color:设置字体颜色

2.font-size:设置字体大小

3.border:边框

4.width:设置宽度,height:设置高度

改变显⽰模式

5.padding:设置内边距

6.margin:设置外边距

一.什么是CSS

CSS：Cascading Style Sheet 层叠样式表,⽤于控制⻚⾯的样式.

CSS能够对⽹⻚中元素位置的排版进⾏像素级精确控制,实现美化⻚⾯的效果.能够做到⻚⾯的样式和结构分离。

CSS前->CSS 后:

二.语法规则:

选择器{声明内容}

选择器:决定针对哪块修改(找谁)

声明内容:决定修改成什么(干什么)

声明的属性是键值对,用分号 " ; " 来分隔键值对，用冒号" : "来区分键和值.

注意:

CSS要写在style标签中;

style标签可以放到⻚⾯任意位置.⼀般放到head标签内.

CSS使⽤ /**/作为注释.(使⽤ctrl+/快速切换)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        h1{
            color:red;
            width:500px;
        }
    </style>
</head>
<body>
    <h1>好好学习</h1>
</body>

三.使用方式

CSS有三种使用方式:

1.行内样式:

在标签内使⽤style属性，属性值是css属性键值对

  <!-- 行内样式 -->
    <div style="color:red">好好学习</div>

特点:行内样式会引入大量的代码,使代码看起来很乱,因此不常用

2.内部样式:

定义style标签,在标签内部定义CSS样式.

<style>h1{...}</style>

特点:适用于简单的样式实现, 只针对某个标签⽣效.缺点是不能写太复杂的样式.

3.外部样式:

定义标签<link>，通过 href属性引⼊外部css ⽂件

特点:html和CSS实现完全分离,常用于企业开发中.

样式不区分大小写,常用于小写.

空格规范 :

冒号后⾯带空格

选择器和 { 之间也有⼀个空格.

四.CSS选择器类型

1.标签选择器

根据标签对所选内容进行样式设置。

2.类选择器

通过在标签中添加属性class=" 类名",通过.类名 进行选择设置属性.

类选择器可以同名,是用来对一类标签进行样式设置的;类名不能是单独的数字,不能是标签名等特殊字符.

3.ID选择器

通过在标签中添加属性 id=" ID名",通过 #ID名 进行选择设置属性.

id 是唯⼀的,不能被多个标签使⽤，ID名不允许同名,不能是标签名等特殊字符.

4.通配符选择器

使用 * 用来设置页面的所有内容.

5.复合选择器

通过空格分隔进行多重选择,选择到要设置的内容

1. 以上三个标签选择器ul li h1 中的任意,都可以替换成类选择器,或者id选择器,可以是任意选择器的组合,也可以是任意数量选择器的组合

2. 不⼀定是相邻的标签,也可以是"孙⼦"标签

3. 如果需要选择多种标签,可以使⽤ , 分割,如p, div { } 表⽰同时选中p标签和div标签.逗号前后可以是以上任意选择器,也可以是选择器的组合.

五.常用的CSS样式

1.color:设置字体颜色

颜色表达方式:

1>.直接写颜色英文单词:

2>.rgb代码的颜色:

rgb代表红绿蓝三原色,通过比例的设置选择颜色.

3>.16进制表示:

16进制表示的原理还是rgb,每两个16进制代表一个rgb颜色.

2.font-size:设置字体大小

3.border:边框

border是一个符合属性,可同时设置多个属性,边框宽度,边框颜色,边框形状,不分先后顺序,浏览器可以自己识别.

也可以拆开来设置:

样式	作用	取值
border-width	设置边框粗细	数值
border-color	设置边框颜色	同color
border-style	设置边框形状	dotted:点状 solid:实线 double:双线 dashed:虚线