2--DIV CSS基础

这篇具有很好参考价值的文章主要介绍了2--DIV CSS基础。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.概述

CSS指的是层叠样式表(Cascading Style Sheets),也称级联样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素,可以同时控制多张网页的布局。

DIV是HTML的一个标签,CSS是一个样式表。

2.样式表类型

2.1 嵌入样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .嵌入样式{
                color: blue;
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="嵌入样式">
            文本内容1
        </div>
            
    </body>
</html>

2.2 外部样式

建立外部css文件1并引入

<link rel="stylesheet" href="css/外部样式.css" />

外部css文件1还可以引入外部css文件2

@import url("外部样式+.css");
.嵌入样式{
                color: blue;
                width: 100px;
                height: 100px;
                background: red;
            }

2.3 内联样式

<div style="color: red;width: 100px;height: 100px;background: blue;">
            文本内容2
</div>

3.样式选择器

 CSS选择器用于查找(或选取)要设置样式的HTML元素

3.1 元素选择器

元素选择器根据元素名称来选择HTML元素

p{
                color: red;
                text-align: center;
            }

<p>元素选择器</p>
div{
                color: red;
                text-align: center;
            }

<div>元素选择器</div>

3.2 ID选择器

ID 选择器选择有特定id属性的HTML 元素

#part1{
                color: blue;
                text-align: center;
            }

<p id="part1">ID选择器</p>

3.3 类选择器

类选择器选择有特定 class 属性的 HTML 元素

.part2{
                color: black;
                text-align: center;
            }

<p class="part2">类选择器</p>

3.4 通用选择器

通用选择器(*)选择页面上的所有的 HTML 元素

*{
                color: brown;
                text-align: left;
            }

3.5 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素

h1,h2{
                color: pink;
                text-align: left;
            }

4.背景

CSS 背景属性用于定义元素的背景效果

body{
                background: url(img/txt.jpg) no-repeat scroll;
            }

 

background-color:规定要使用的背景颜色

background-position:规定背景图像的位置

background-size:规定背景图片的尺寸

background-origin:规定背景图片的定位区域

background-image:规定要使用的背景图像

background-clip:规定背景的绘制区域

 

background-repeat:规定如何重复背景图像

repeat(默认):背景图像在垂直方向和水平方向重复

repeat-x:背景图像在水平方向重复

repeat-y:背景图像在垂直方向重复

no-repeat:背景图像仅显示一次

inherit:规定应该从父元素继承 background 属性的设置

 

background-attachment:规定背景图像是否固定或者随着页面的内容滚动

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

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

5.边框

CSS 边框属性用于指定元素边框的样式、宽度和颜色

.part3{
                width: 200px;
                height: 200px;
                border: solid 50px red;
            }

 

边框样式值:none,hidden,dotted,dashed,solid,double

border-left:设置左边框,一般单独设置左边框样式使用

border-right:设置右边框,一般单独设置右边框样式使用

border-top:设置上边框,一般单独设置上边框样式使用

border-bottom:设置下边框,一般单独设置下边框样式使用

6.文字属性

color:文字颜色

font-size:文字大小

font-weight:文字粗细

font-family:文字字体

font-variant:字体变体

  small-caps:小写字母转换为大写字母

7.文本属性

text-align:文本对齐

  right,left,center

letter-spacing::字间距

text-indent:首行缩进

line-height:行间距

text-decoration:文本线

  underline:定义文本上的下划线

  overline:定义文本上的上划线

  line-through:定义文本上的中划线

 8.列表

在HTML中,列表主要有两种类型:

  无序列表(<ul>):列表项使用项目符号标记

  有序列表(<ol>):列表项使用数字或字母标记

list-style-type:设置列表项标记的类型

  disc,circle,square,decimal

list-style-position:设置在何处放置列表项的的标记

  inside,outside

list-style-image:设置用图像来替换列表项的标记

list-style:circle inside url(img/txt.jpg)

9.超链接

a:link:未访问的链接

a:visited:已访问的链接

a:hover:鼠标划过链接

a:active:已选中的链接

.part4 a:visited{
                text-decoration: none;
            }

注意:在CSS定义中,

a:hover必须位于a:link和a:visited之后才能生效

a:active必须位于a:hover之后才能生效

10.盒模型

所有 的HTML 元素都可以视为方框,CSS 盒模型实质上是一个包围每个 HTML 元素的框。

在 CSS 中,谈论设计和布局时会使用术语“盒模型”或“框模型”,它包括:外边距、边框、内边距以及实际的内容

在 CSS 中,width 和 height 指的是内容区域的宽度和高度,下图展示了盒模型:

2--DIV CSS基础

11.浮动和清除

float:规定元素如何浮动,用于定位和格式化内容

  none(默认):元素不会浮动(将显示在文本中刚出现的位置)

  left:元素浮动到其容器的左侧

  right:元素浮动在其容器的右侧

  inherit:元素继承其父级的 float 值

clear:规定哪些元素可以在清除的元素旁边以及在哪一侧浮动

  none(默认):允许两侧都有浮动元素

  left:左侧不允许浮动元素

  right:右侧不允许浮动元素

  both:左侧或右侧均不允许浮动元素

  inherit:元素继承其父级的 clear 值

使用 clear 属性的最常见用法是在元素上使用了 float 属性之后

在清除浮动时,应该对清除与浮动进行匹配:如果某个元素浮动到左侧,则应清除左侧

浮动元素会继续浮动,但是被清除的元素将显示在其下方

例如清除向左的浮动:表示在(div 的)左侧不允许出现浮动元素

12.块级元素、行内元素

块级元素:独占一行,在默认情况下其宽度自动填满其父元素的宽度

块级元素即使设置了宽度也是独占一行,可以设置midth,height,margin,padding属性

  <div> <h1> - <h6> <p> <form> <header> <footer> <section>

行内元素:不会独占一行,相邻的行内元素会排在同一行,仅占用所需的宽度

  <span> <a> <img> <i>

行内元素转换:规定是否或如何显示元素

  display:none:不显示

  display:block:变成块级元素

  display:inline:变成行内元素

  display:inline-block:以块级元素样式展示,以行级元素样式排列

13.溢出

overflow属性规定在元素的内容太大而无法放入指定区域时(即溢出)是剪裁内容还是添加滚动条

div{
                overflow: visible;
            }

visible(默认):内容不会被修剪,会呈现在元素框之外

hidden:内容会被修剪,其余内容不可见

scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容

auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容

14.定位

position属性规定应用于元素的定位方法的类型

div{
                position: static;
            }

static(静态定位):默认值,元素不受 top、bottom、left 和 right 属性的影响

fixed(固定定位):元素相对于浏览器窗口进行定位,即使页面滚动,也始终位于同一位置

relative(相对定位):元素相对于正常位置进行定位

absolute(绝对定位):元素相对于最近的定位父元素进行定位

 

z-index属性指定元素的堆栈顺序(哪个元素应放置在其他元素的前面或后面)

具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前

如果两个定位的元素重叠而未指定 z-index,则位于 HTML 代码中最后的元素将显示在顶部文章来源地址https://www.toymoban.com/news/detail-560618.html

到了这里,关于2--DIV CSS基础的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [HTML]Web前端开发技术5.1(HTML5、CSS3、JavaScript )CSS基础,selector,properties,font,Cascading,@import——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS概念   传统HTML的缺点 CSS的优势 浏览器与CSS 3 CSS编辑方法 使用CSS控制Web页面 CSS基本语法 CSS定义与

    2024年02月05日
    浏览(72)
  • 视频讲解vue2基础之style样式class类名绑定

    目录  style样式的动态绑定 class类名动态绑定 一:官方给出的写法 二:自创三元表达式写法  详细的视频讲解:002vue_样式的动态绑定_哔哩哔哩_bilibili 003vue_样式动态绑定(小案例)_哔哩哔哩_bilibili 详细的视频讲解:002vue_样式的动态绑定_哔哩哔哩_bilibili 003vue_样式动态绑定

    2023年04月15日
    浏览(50)
  • 2--DIV CSS基础

    CSS指的是层叠样式表(Cascading Style Sheets),也称级联样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素,可以同时控制多张网页的布局。 DIV是

    2024年02月16日
    浏览(33)
  • 【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )

    构建一个网页 , 首先 , 创建盒子模型 , 设置盒子的大小和摆放位置 , 下图中红色矩形框就是盒子模型 ; 然后 , 将 文本 , 图片 , 链接 , 表单 等网页元素 , 按照一定的样式 , 填充进盒子中 , 就形成了我们看到的网页 ; 盒子 中 还可以嵌套 若干盒子 ; HTML 的 一个布局 可以看做一个

    2024年02月04日
    浏览(68)
  • CSS_特性继承和层叠

    特性: 1、子元素有默认继承父元素样式的特点( 子承父业 ) 2、可以继承的常见属性(文字控制属性都可以继承) 1.color 2.font-style、font-weight、font-size、font-family 3.text-indent,text-align 4.line-height 注意点: 可以通过调试工具判断样式是否可以继承 特性: 1、给同一个标签设置不

    2024年02月08日
    浏览(88)
  • 【CSS】CSS文本样式【CSS基础知识详解】

    👨‍💻个人主页:@花无缺 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 花无缺 原创 本文章收录于专栏 【CSS】 【CSS专栏】 已发布文章 📁【CSS基础认知】 📁【CSS选择器全解指南】 📁【CSS字体样式】 属性名: color 作用:设置文本的颜色 属性值: 颜色表示方式 表示含

    2024年01月21日
    浏览(50)
  • 【CSS】CSS字体样式【CSS基础知识详解】

    👨‍💻个人主页:@花无缺 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 花无缺 原创 本文章收录于专栏 【CSS】 【CSS专栏】 已发布文章 📁【CSS基础认知】 📁【CSS选择器全解指南】 文字是网页界面上最常见的元素,而文字的字体、大小和文字样式等都可以通过CSS来设置

    2024年02月05日
    浏览(78)
  • vue动态绑定style样式之动态添加style样式的多种写法

    项目中会需要动态添加 style 行内样式,现指出常用的几种方式。 注意: 1、凡是有 - 的style属性名都要变成驼峰式,比如font-size要变成 fontSize。 2、除了绑定值,其他的属性名的值要用引号括起来,比如 fontSize:\\\'14px\\\' 而不是 fontSize :14px。 对象形式 data(){ return { baseStyles: { width:

    2024年04月17日
    浏览(60)
  • 优化CSS重置过程:探索CSS层叠技术的应用与优势

    目录 下面是正文~~ CSS重置方法 方法的结合 合并方法的问题 通用移除样式 顺序很重要 CSS 优先级 我们的CSS特异性冲突 CSS Layers 来拯救 Sass 预处理器支持 浏览器支持 总结 这篇文章介绍了一种名为 CSS 层叠的技术,用于优化CSS重置过程。它解释了 CSS 重置的概念,即通过删除浏

    2024年02月16日
    浏览(42)
  • CSS_三大特性上_特性继承和层叠

    特性: 1、子元素有默认继承父元素样式的特点( 子承父业 ) 2、可以继承的常见属性(文字控制属性都可以继承) 1.color 2.font-style、font-weight、font-size、font-family 3.text-indent,text-align 4.line-height 注意点: 可以通过调试工具判断样式是否可以继承 特性: 1、给同一个标签设置不

    2024年02月08日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包