javaWeb学习笔记 --- CSS

最新推荐文章于 2024-05-31 19:50:46 发布

zss1+1

最新推荐文章于 2024-05-31 19:50:46 发布

阅读量115

点赞数

分类专栏： java 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_39281866/article/details/122030389

版权

java 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

CSS

css概述

css：层叠样式表，可以用来美化html页面，就比如html是盖房子，而css则是装修。可以实现展示数据的html代码和设置样式的CSS代码的分离，增强了网页的显示能力

在html页面中引入css样式的方式

通过标签上的style属性引入css样式

大多数标签都可以具有style属性, 可以通过style属性为当前标签设置样式
这种方式设置样式不推荐大量使用, 会造成页面结构的混乱, 不利于后期的维护及扩展

<div style= "border: 2px solid red; font-size: 30px; font-family: 楷体;">first div</div>
<span style=" border: 2px solid green; font-size: 30px; font-style: italic;">first span</span>
<p style="border: 2px solid blue; font-size: 30px; font-weight: bold;">first p</p>

通过style标签引入css样式

在head标签内部, 可以提供一个style标签, 在style标签内部可以选中元素进行修饰
这种方式是将所有的css代码放在一个style标签内部统一进行管理, 初步的实现了html代码和css代码的分离

<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <style type="text/css" media="screen" id="test">
        span{
            border: 2px solid blue;
            font-size: 30px;
            font-style: italic;
        }
        div{
            border: 2px solid #999;
            font-size:30px;
            font-family: "楷体";
        }
    </style>
</head>

通过链接引入外部的css文件
- 通过head标签下的link标签可以引入外部的css文件
- 这种方式是将所有的css代码放在一个独立的文件中进行统一管理, 真正的实现了html代码和css代码的分离
```
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="demo.css"/>
</head>
```

选择器

选择器可以帮助我们在html中选中想要修饰的标签进行修饰

基本选择器

标签名(元素名)选择器
通过标签的名称选中指定名称的标签进行样式的修饰
格式: 元素名{}, 如: span{}

<style type="text/css" >
    /* 为了看着方便给所有标签都加上边框 */
    div,span,p{border: 1px solid red;}
    /* 1.标签名选择器 */
    span{
        background-color: #DDA0DD;
        font-size: 16px;
    }
</style>

类(class)选择器
通过标签上的class属性, 可以为标签设置所属的类, 所有class值相同的标签则为一类, 可以通过标签名选择器选中这一类的标签进行修饰
格式:.类名{ css属性 }, 如: .c1{}

<style type="text/css" >
    /* 2.类选择器 */
    .c1{
        background-color: #8FBC8F;
        color: green;
    }

    .c2{
        background-color: #F0E68C;
        color: blue;
    }
</style>

ID选择器
通过标签上的id属性, 可以为标签设置所属的编号, id值的特点是在整个html中是独一无二的. 可以通过id值选中想要修饰的标签
格式: #id值{ css属性 }, 如: #d1{}

一个标签可以即定义class属性，又定义id属性，id选择器中的CSS属性会覆盖class选择器中的CSS属性 (作用域小的优先)
```
<style type="text/css" >
    /* 3.id选择器 */
    #d1{
        font-weight: bold;
        text-indent: 30px;
    }
</style>
```

扩展选择器

后代选择器
在父选择器选中的元素内部, 再选中指定的后代元素进行修饰
格式: 父选择器后代选择器{ }
如: 选中div(id = “d1”)下所有的子元素span
```
<style type="text/css" >
    /* 1. 后代选择器 */
    #d1 span{
        font-size: 100%;
        background-color: #DDA0DD;
    }
</style>
```

子元素选择器
在父选择器选中元素的内部, 选中指定的子元素进行样式的修饰

只能选择父选择器下的一层选择器

格式: 父选择器>子元素选择器{ }
如: 选中div(id = “d1”)下一层的子元素span

<style type="text/css" >
    /* 2. 子元素选择器 */
    /*只能选择父选择器下的一层选择器*/
    #d1 > span{
        font-size: 16px;
        background-color: #DEB887;
    }
</style>

分组选择器
可以将多个选择器选中的元素统一来设置样式
格式:选择器1,选择器2,选择器3,…选择器n{}

<style type="text/css" >
    /* 3.分组选择器 */
    .c1, .c2, #p1 > span{
        background-color: #F4A460;
    }
</style>

属性选择器
可以通过属性条件选中元素进行修饰
格式: 选择器[属性条件..]{}
如: a. 将所有有class属性的元素的边框设置为2px、实线、灰色
b. 将所有的type="text"的<input>标签的背景颜色设置为red, 设置字体首行缩进10px
```
<style type="text/css" >
    /* 4.属性选择器 */
    *[class]{
        border: 2px solid gray;
    }
    input[type = "text"]{
        background-color: red;
        text-indent: 10px;
</style>
```
相邻兄弟选择器
如果两个元素具有相同的父元素, 并且是紧挨着的, 这两个元素就是相邻兄弟, 可以通过相邻兄弟选择器选中A元素后的B元素

格式:A+B{ }

如：将id为p1元素后面的p元素的背景颜色设置为 #DB7093
```
<style type="text/css" >
    /* 5.相邻兄弟选择器 */
    #p1 + p{
        background-color: #DB7093;
    }
</style>
```

伪元素选择器
伪元素选择器选中的不仅仅是元素本身, 还包括元素的状态
状态分为如下几种:

选择器:link — 表示元素未被点击时的状态
选择器:hover — 表示光标(鼠标)悬停时的状态
选择器:active — 表示元素被点击时的状态
选择器:visited — 表示元素被点击之后的状态

<style type="text/css" >
    /* 6.伪元素选择器 */
    a:link{
        font-size:24px;
        text-decoration: none;/* 无下划线 */
    }

    a:hover{
        color:green;
        font-size:36px;
        text-decoration: underline;/* 有下划线 */
    }
    a:active{
        color:#8FBC8F;
        font-size:50px;
        text-decoration: none;/* 无下划线 */
    }
    a:visited{
        color:gray;
        font-size:24px;
    }
</style>

注：清除浏览器的缓存 — Ctrl + shift + delete

外边距/边框/内边距

在这里插入图片描述

margin – 外边距
- 格式：
  1. margin-top / margin-bottom / margin-left / margin-right
  2. margin: 10px 20px 40px 60px;/*上、右、下、左*/ margin: 20px 10px;/*上下、左右*/
  3. margin: 20px; /*上下左右*/
- 注意: 垂直外边距合并的现象
  
  外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
padding – 内边距
- 格式同 margin

常用的css属性

元素类型的补充
- 块级元素:
  - 默认情况下，块级元素可以独占一行
  - 块级元素可以设置宽和高
  - 如果不设置宽度: 其中宽是默认填满父元素，高是由内容决定(由内容撑起来)
  - 给块级元素设置的外边距/边框/内边距都会起作用
- 行内元素:
  - 默认情况下, 多个行内元素可以处在同一行
  - 不可以设置宽和高，其中宽和高由内容决定
  - 给行内元素设置的左右外边距/边框/内边距都会起作用, 但是上下外边距将不会起作用!
display属性：设置元素的显示方式

属性值	解释
block	块级元素的默认值
inline	行内元素的默认值
inline-block	既具备行内元素的特性，也具备块级元素的特性
none	用来隐藏一个元素，元素在原位置不再占用空间

text-align ：设置元素中文本水平对齐方式
- left: 默认值。左对齐
- right: 右对齐
- center: 居中对齐
- justify: 两端对齐
list列表属性
- list-style-type: none/disc/square/circle…
字体属性
- font-size：字体尺寸
- font-weight：字体加粗
- font-family：字体样式
- color：字体颜色
- line-height：行高
- text-decoration：下划线
背景属性
- background-color：背景颜色设置
- background-image：背景图片设置
- background-repeat：设置背景图像是否及如何铺排
- background-position：设置或检索对象的背景图像位置
其他
- width 设置宽度
- height 设置高度

框架标签

frameset – 定义一个框架集
frame – 定义框架集中的一个窗口

zss1+1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaWeb学习笔记 --- CSS

CSScss概述css：层叠样式表，可以用来美化html页面，就比如html是盖房子，而css则是装修。可以实现展示数据的html代码和设置样式的CSS代码的分离，增强了网页的显示能力在html页面中引入css样式的方式通过标签上的style属性引入css样式大多数标签都可以具有style属性, 可以通过style属性为当前标签设置样式这种方式设置样式不推荐大量使用, 会造成页面结构的混乱, 不利于后期的维护及扩展<div style= "border: 2px solid re
复制链接

扫一扫