当前位置:   article > 正文

WEB安全之DIV CSS基础(一):样式类型和样式选泽、背景和边框_div边框和背景颜色

div边框和背景颜色

1、DIV和CSS样式

  • 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。[1]
    CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

  • DIV是html的一个标签,css是一个样式表

  • 网页中的div与样式表
    在这里插入图片描述

  • head顶部引入的样式表
    在这里插入图片描述

  • 去掉样式表,网页外观就发生了改变

  • 样式表写在外面,然后再用link引用过来,写在内部对搜索引擎不太友好

2、样式表类型

2.1.嵌入样式表

  • 在head里面的,用style书写的
  • 使用.引入
  • 创建一个div里面有demo1的文字,调整样式
    在这里插入图片描述
    在这里插入图片描述
  • 将宽和高去掉
    在这里插入图片描述
    在这里插入图片描述

2.2.外部样式

  • link导入的
<link rel="stylesheet" type="text/css" href="mystyle.css">
<div style:"background-colorred"></div>
  • 1
  • 2

外部里面引入css文件

  • 新建css文件
    在这里插入图片描述
  • 在head里面用快捷方式做一个引入
    在这里插入图片描述
  • 不添加的时候是最原本的黑白,无边框
    在这里插入图片描述

在这里插入图片描述

  • 默认引用过来是
    在这里插入图片描述

在外部里面再引入外部的

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.3内联样式

  • 在标签内部来修饰标签的
div style:"background-color.red"></div>
  • 1

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、注释

/**/注释内容
  • 1

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4、样式选择器

  • 元素选择器 div(属性:值)
    ID选择器 #id(属性:体)
    class选择器 .类名{属性:值)
    子选择器 元数空格元素{属性:值)
    后代达择器 元数>元数(属性:值)
    属性选择器元素[属性]0
    通配符选择器 *{属性:值)
    群组选择器

类选择器

  • 在这里插入图片描述
  • demo1就是一个类选择器,class是一个属性,值在样式表里面修改
  • 在这里插入图片描述
    在这里插入图片描述

id选择器

  • id选择器不能重复,类选择器可以重复
  • id选择器如何改变它里面的值呢 先用#号选择它
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

元素选择器

  • 把所有div的边框颜色进行设置
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

通配符选择器

  • 通配符选择器可以选择所有元素
  • 浏览器内部一般有默认边距
  • 把所有元素和标签的所有外边距和内边距设为0px
    在这里插入图片描述
    在这里插入图片描述

群组选择器

  • 为两个选择器设置即为群组选择器的意思
  • 作用是把一些重复的值写到一起
    在这里插入图片描述
    在这里插入图片描述

子选择器

  • 将demo2的p标签段落的颜色改变(默认是黑色)
  • 在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 使用>号也可以达到这种效果
    在这里插入图片描述
    在这里插入图片描述

5、背景

  • background-color 规定要使用的背景颜色。
    background-position 规定背景图像的位置。
    background-size 规定背景图片的尺寸。
    background-repeat 规定如何重复背景图像。
    background-origin 规定背景图片的定位区域。
    background-clip 规定背景的绘制区域。
    repeat 默认。背景图像将在垂直方向和水平方向重复。
    repeat-x 背景图像将在水平方向重复。
    repeat-y 背景图像将在垂直方向重复。
    no-repeat 背景图像将仅显示一次。
    inherit 规定应该从父元素继承 background-repeat 属性的设置。
    background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
    background-image 规定要使用的背景图像。

  • 两种方式都可以把背景变为红色

  • 在这里插入图片描述
    在这里插入图片描述

  • 也可以把背景设置成一张图片,会自动铺满屏幕
    在这里插入图片描述
    在这里插入图片描述

  • 不让其铺满

  • no-repeat
    在这里插入图片描述
    在这里插入图片描述

  • 纵向铺满,repeat-y
    在这里插入图片描述
    在这里插入图片描述

  • 横向铺满,repeat-x
    在这里插入图片描述
    在这里插入图片描述

  • 背景是否随着内容滚动

  • 不让其铺满,横向,背景固定,设置滚动条(用的多)
    在这里插入图片描述
    在这里插入图片描述

  • 默认滚动,随内容滚动而滚动,scroll
    在这里插入图片描述
    在这里插入图片描述

  • 简写(用的多)
    在这里插入图片描述
    在这里插入图片描述

  • inherit 规定应该从父元素继承 background 属性的设置。
    left top
    left center
    left bottom
    right top
    right center
    right bottom
    center top
    center center
    center bottom

  • 背景图片的滚动

  • 背景图片是否随着内容的滚动而滚动由background-attachment设置

  • background-attachment:fixed; 固定,不随内容的滚动而滚动

  • background-attachment:scroll; 滚动,随内容的滚动而滚动

6、边框

边框颜色

  • border-color:#000

边框宽度

  • border-width:1px;

  • border-left 设置左边框,一般单独设置左边框样式使用
    border-right 设置右边框,一般单独设置右边框样式使用
    border-top 设置上边框,一般单独设置上边框样式使用
    border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

边框样式值

  • none :  无边框。与任何指定的border-width值无关
    hidden :  隐藏边框。IE不支持
    dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常用)
    dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线(常用)
    solid :  实线边框(常用)
    double :  双线边框。两条单线与其间隔的和等于指定的border-width值

  • 设置边框在这里插入图片描述
    在这里插入图片描述

  • 再设置一个demo7,让其与demo6的间隔相差10px,margin-top
    在这里插入图片描述
    在这里插入图片描述

  • 给四个边框四个不同效果
    在这里插入图片描述
    在这里插入图片描述

  • 简写
    在这里插入图片描述
    在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/767415
推荐阅读
相关标签
  

闽ICP备14008679号