JavaWeb-一篇文章带你入门CSS(笔记+案列)

最新推荐文章于 2024-06-02 15:09:49 发布

手插口袋谁也不爱♡

最新推荐文章于 2024-06-02 15:09:49 发布

阅读量489

点赞数 15

分类专栏： JavaEE 文章标签： css html java-ee 学习前端

本文链接：https://blog.csdn.net/st200112266/article/details/130660147

版权

JavaEE 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

CSS是什么

CSS 是层叠样式表 (Cascading Style Sheets) 的简称,CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素.

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

基本语法

选择器 {一条或者N条声明}

选择器: 指定修改的是谁
声明:决定修改什么

例如:

    <!-- CSS 要写到 style 标签中  -->
<style>
        h1 {
        /* 设置字体颜色 */
        color: green;
        }
    </style>
     <h1> 要想生活过得去 </h1>

在这里插入图片描述

CSS的引入方式

内部样式表

写在 style 标签中. 嵌入到 html 内部,理论上来说 style 放到 html 的哪里都行,但是一般都是放到 head 标签中的.
上面举的例子就是使用这种内部样式表引入方式.

行内样式表

通过 style 属性, 来指定某个标签的样式,当然也就只生效于这个标签.

 <h1 style="color: royalblue;"> 要想生活过得去 </h1>

在这里插入图片描述

这种写法优先级较高,会覆盖其他引入方式的写法
例如:

<style>
        h1 {
        color: green;
        }
    </style>
     <h1 style="color: royalblue;"> 要想生活过得去 </h1>

在这里插入图片描述

外部样式表

创建一个CSS文件,在文件里写入需要修改的样式.
在HTML中通过link标签来进行CSS文件的引入

 <link rel="stylesheet" href="[文件路径名]">

选择器

选择器是用来选中页面中指定的标签元素来进行属性的设置

基础选择器

标签选择器

语法: 标签名 { }

 <style>
        div {
color: brown;
font-size: 100px;
        }
        span {
            color: chartreuse;
            font-size: 90px;
        }
    </style>
    <div>加油</div>
    <div>加油</div>
    <span>努力</span>
    <span>努力</span>

在这里插入图片描述
优缺点:
能快速为同一类型的标签都选择出来.
但是不能差异化选择.

类选择器

语法: .类名 { }

  <style>
.one {
    color: green;
}
.two {
    color: brown;
}
.span {
    color: gold;
}
    </style>
    <div class="one">今天星期六</div>
    <div class="two">今天星期六</div>
    <span class="three">今天星期六</span>

在这里插入图片描述

优缺点:

差异化表示不同的标签
可以让多个html标签被同一个css修改属性.

id选择器

语法: #id { }

<style>
        #1 {
            color: red;
    
        }
    </style>
    <div id="1">id选择器</div>

在这里插入图片描述

注意:

CSS 中使用 # 开头表示 id 选择器
id 是唯一的, 不能被多个标签使用

通配符选择器

语法: * { }

在这里插入图片描述

<style>
        * {
            color: green;
        }
    </style>
    <div>通配符</div>
    <span>通配符</span>

复合选择器

后代选择器

语法: 元素1 元素2 { }

元素之间使用空格分开
元素二是元素一的后代,可以是子元素,也可以是孙元素等等.
可以是任意基础选择器之间的组合

<style>
        ul .li {
           /* 标签选择器与类选择器 */
            color: green;
        }
        ul li {  
         /* 标签选择器与标签选择器 */
            color: red;
        }
    </style>
    <ul><li>fascinated</li>
    <li class="li">入迷的</li>
    </ul>

在这里插入图片描述

子选择器

语法: 元素1>元素2 { }

与后代选择器一样,但元素2只能是元素1的子标签

<style>
        div>p {
            color: green;
        }
    </style>
    <div>
        <p> 子类选择器</p>
        <span><p>孙类选择器</p></span>
    </div>

在这里插入图片描述

常用元素属性

字体属性

设置字体

<style>
        .font-family .one {
font-family: '微软黑';
        }
        .font-family .two {
font-family: '宋体';
        }
    </style>
    <div class="font-family"><div class="one">
        早睡早起!
            </div>
            <div class="two">
        身体更好!
            </div></div>

在这里插入图片描述

字体名称可以用中文, 但是不建议
如果字体名有空格, 使用引号包裹
如果所使用字体找不到就会使用默认字体

<style>
                .font-size {
                    font-size: 40px;
                    font-family: '宋体';
                }
            </style>
            <div><p class="font-size">字体大小</p></div>

在这里插入图片描述

注意不要忘记字体大小单位px

字体粗细

<style>
                div {
                    font-weight: bold;
                    /* bold=700 */
                }
            </style>
            <div>字体粗细</div>
            <span style="font-weight: 100;">字体粗细</span>

在这里插入图片描述

使用数字表示粗细
取值范围是 100 -> 900

文字样式

<style>
                div .one {
                     /* 设置斜体 */
                    font-style: italic;
                }
                div .two {
                  /* 取消斜体 */
                    font-style: normal;
                }
            </style>
            <div><p class="one">斜体</p>
            <p class="two">取消斜体</p>
            </div>

在这里插入图片描述

文本属性

文本颜色

在计算机中我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果,针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).
数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色
设置文本颜色我们有三种设置方式分别为:

预定义的颜色值(比如直接写出颜色所对应的单纯)
十六进制形式 (#f0f0f0 )
rgb(255, 255, 255)

文本对齐
用属性 text-align 来进行控制

text-align:center -居中对齐
text-align:eft -左对齐
text-align:right -右对齐

文本缩进
用属性 text-indent 来进行控制
text-indent: 值px ;
单位可以使用 px 或者 em(em为当前文字的大小)
文本装饰
使用属性text-decoration 来进行修饰

text-decoration : underline -下划线
text-decoration : none -什么都没有,通常用来给链接标签进行去下划线处理

背景属性

背景颜色
使用background-color属性
background-color: 指定颜色

<style>
            .one {
                background-color: green;
            }
            .two {
background-color:#f0f;
            }
            .three {
background-color: rgb(188,188,188);
            }
          </style>
          <div class="one">1</div>
          <div class="two">2</div>
          <div class="three">3</div>

在这里插入图片描述

背景图片
使用background-image属性来进行修改
background-image: url(…);

<style>
            div {
                height: 400px;
                background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.7001bfb15f5a6ae18f5d8ab08aa841e2?rik=BkzF%2bDcWXFxAIg&riu=http%3a%2f%2fpic.qqbizhi.com%2fallimg%2fbpic%2f0%2f4000_2.jpg&ehk=Qx4cZP5pzezjYTRHXs3i8zvCfbSo6%2fKGdSbRIDRx%2b0U%3d&risl=&pid=ImgRaw&r=0);
                /* url 可以是绝对路径, 也可以是相对路径 */
            }
          </style>
          <div>
            1
          </div>

在这里插入图片描述

背景平铺
背景平铺通过background-repeat属性来进行修改
background-repeat: [平铺方式]

repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺

圆角矩形

通过 border-radius 属性进行修改
border-radius:长度;

生成圆形
长度为矩形的内切圆半径,所以要生成圆形只需要让长度为正方形的一半即可.

<style>
            .one {
                background-color: chartreuse;
                width: 100px;
                height: 100px;
                border-radius: 50px;
            }
          </style>
          <div class="one">

          </div>

在这里插入图片描述

生成圆角矩形
生成圆角矩形也很简单,将 border-radius 的属性值设为矩形高度的一半即可

 <style>
            .one {
                background-color: chartreuse;
                width: 200px;
                height: 100px;
                border-radius: 50px;
            }
          </style>
          <div class="one">

          </div>

在这里插入图片描述

元素的显示模式

块级元素

常见的块级元素都有:h1 - h6 , p ,div , ul ,ol ,li 等

 <style>
                .one .one1 {
                    font-weight: bold;
                }
                .one .one2 {
                    font-weight: 200;
                    color: green;
                }
            </style>
            <div class="one">
                <div class="one1"  >
               块级元素
                </div>
                <div class="one2">
               块级元素
                </div>
            </div>

在这里插入图片描述
由上述结果可见块级元素是独占一行的(代码中并没有使用换行).

特点:

独占一行.
高度, 宽度, 内外边距, 行高都可以控制.
不设置宽度的话,默认跟父级元素同宽.

行内元素

常见的行内元素: a , b , i , s , u , span

           <style>
                .one {
          width: 200px;
                }
                .two {
          width: 600px;
                }
            </style>
          <span class="one">
        无语义标签
          </span>
          <span class="two">
        无语义标签
          </span>