首页 前端知识 Web前端开发之CSS_1

Web前端开发之CSS_1

2024-05-26 01:05:04 前端知识 前端哥 885 168 我要收藏
  • CSS
  • 选择器
  • 字体属性
  • 背景属性
  • 文本属性
  • 表格属性

1. CSS

1.1 CSS简介

        CSS(Cascading Style Sheets)层叠样式表,又叫级联样式表,简称样式表。CSS文件后缀名为 .css CSS用于HTML文档中元素样式的定义。使用CSS可以让网页具有美观一致的页面

        CSS规则由两个主要的部分构成:选择器,以及一条或多条声明(样式)

 语法

  • 选择器通常是需要改变样式的HTML元素
  • 每条声明由一个属性和一个值组成
  • 属性是希望设置的样式属性,每个属性有一个值。属性和值被冒号分开

 

1.2 CSS的引入方式
  • 内联样式(行内样式)---- 缺乏整体性和规划性,不利于维护,维护成本高

        要使用内联样式,需要在相关的标签内使用样式(style)属性。Style属性可包含任何CSS属性

<p style="background: orange; font-size: 24px;">CSS内联样式</p>

  • 内部样式 ---- 单个页面内的CSS代码具有统一性和规划性,便于维护,但多个页面易混乱

        当单个文档需要特殊的样式时,就应该使用内部样式表,可使用<style>标签在文档头部定义内部样式表。

<head>

        <style>

                h1{

                        background:red;

                }

        </style>

</head>

  • 外部样式(推荐)

        当样式需要应用于很多页面时,外部样式表将是最理想的选择。在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在文档的头部。

<link rel="stylesheet" type="text/css" href="xxx.css">

2. 选择器(为元素匹配样式)

2.1 全局选择器 

        可以与任何元素匹配,优先级最低,一般做样式初始化

*{

        margin:0;

        padding:0;

}

2.2 元素选择器

        HTML文档中的元素,pbdivaimgbody

        标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某个元素的“个性”

<p>学完<span>前端</span>,继续学Java</p>

<style>

        span{

            color: red;

        }

</style>

  • 所有的标签,都可以是选择器。比如ul、li、label、dt、dl、input、div
  • 无论这个标签藏的多深,一定能够被选择上
  • 选择的所有,而不是一个
2.3 类选择器   ---- 灵活

        规定用圆点 . 来定义,针对想要的所有标签使用

<h2 class="oneclass">你好</h2>

/*定义类选择器*/

.oneclass{

        width:800px;

}

class属性特点

  • 类标签可以被多种标签使用
  • 类名不能以数字开头
  • 同一标签可以使用多个类选择器,用空格隔开

<h3 class="classone classtwo">一个h3标题</h3>

2.4 ID选择器

        针对某一个特定的标签使用,只能使用一次。css中的ID选择器以定义

<h2 id="mytitle">你好</h2>

<style>

        #mytitle{

            border:3px dashed green;

        }

</style>

  • ID是唯一的
  • ID不能以数字开头
2.5 选择器的使用
合并选择器

语法选择器1,选择器2,…{ }作用提取共同的样式,减少重复代码

.header,.footer{

        height:300px;

}

选择器的优先级

CSS中,权重用数字衡量

  • 元素选择器的权重为:1
  • class选择器的权重为:10
  • id选择器的权重为:100
  • 内联样式的权重为:1000

优先级从高到低:行内样式 > ID选择器 > 类选择器 > 元素选择器

3. 字体属性

        CSS字体属性定义字体颜色大小加粗文字样式

  • color,规定文本的颜色
<style>
        p{
            color: red;
            color: #00ff00;
            color: rgb(0, 0, 255);
            color: rgba(255, 0, 0, .5);
        }
    </style>
  • font-size,设置文本大小,chrome接受最小字体是12px
  • font-weight,设置文本的粗细
描述
bold定义粗体字符
bolder定义更粗的字符
lighter定义更细的字符
100~900定义由细到粗 400等同默认,而700等同于bold

h1{font-weight:normal;}

  •  font-style,指定文本的字体样式
描述
normal默认值
italic定义斜体字
  •  font-family,指定一个元素的字体

font-family:"Microsoft YaHei","Simsun","SimHei";

//每个值用逗号隔开

//如果字体名称包含空格,它必须加上引号

4. 背景属性

CSS背景属性主要有以下几个:

属性描述
background-color设置背景颜色
background-image设置背景图片
background-position设置背景图片显示位置
background-repeat设置背景图片如何填充
background-size设置背景图片大小属性
  • background-color属性

<div class="box"></div>

<style>

        .box{

            width: 400px;

            height:400px;

            background-color: palevioletred;

        }

</style>

  • background-image属性 ---- 设置元素背景图片

        元素的背景是元素的总大小,包括填充和边界(不包括外边距)。默认情况background-image属性放置在元素的左上角,如果图像不够大的话会在垂直和水平方向平铺图像,如果图像大小超过元素大小,则从图像的左上角显示元素大小的那部分。

<div class="box"></div>

<style>

        .box2{

            width: 400px;

            height: 400px;

            background-image: url("1.webp");

        }

</style>

  • background-repeat属性 ---- 设置如何平铺背景图像
说明
repeat默认值
repeat-x只向水平方向平铺
repeat-y只向垂直方向平铺
no-repeat不平铺
  • background-size属性 ---- 设置背景图像的大小
说明
length设置背景图片宽度和高度,第一个值宽度,第二个值高度;如果只设置一个,第二个值auto
percentage计算相对位置区域的百分比,第一个值宽,第二个值高度;如果只设置一个,第二个值auto
cover保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 ---- 图片有裁剪
contain保持图片纵横比并将图片缩放成适合背景定位区域的最大大小 ---- 未充满整个容器
  • background-position属性 ---- 设置背景图片起始位置,默认值是:0% 0%
说明
left top左上角
left center左中
left bottom左下
right top右上角
right center右中
right bottom右下
center top中上
center center中中
center bottom中下
x% y%第一个值水平位置,第二个垂直位置,左上角0% 0%,右下角100% 100%;默认左上角0% 0%,如果只指定一个值,其他值默认50%
xpos ypos单位是像素

5. 文本属性

  • text-align ---- 指定元素文本的水平对齐方式
描述
left文本居左排列,默认值
right把文本排列到右边
center把文本排列到中间
  • text-decoration ---- 规定添加到文本的修饰,下划线、上划线、删除线等
描述
underline定义下划线
overline定义 上划线
line-through定义删除线
  • text-transform ---- 控制文本的大小写
描述
captialize定义每个单词开头大写
uppercase定义全部大写字母
lowercase定义全部小写字母
  • text-indent ---- 规定文本块中首行文本的缩进

p{

     text-indent: 30px;

}

负值是允许的,如果值为负数,将第一行左缩进

6. 表格属性

  • 表格边框 --- 指定CSS表格边框,使用border属性

table,td{

      border: 1px solid red;

}

  • 折叠边框 ---- border-collapse 属性设置表格边框是否被折叠成一个单一的边框或隔开

table,td{  border: 1px solid red; }

table{

     border-collapse: collapse;

}

  • 表格宽度和高度 ---- width 和 height属性定义表格的宽度和高度

table{ width: 100%; }

td{ height: 50px; }

  • 表格文字对齐 --- 表格中的文本对齐和垂直对齐属性

// text-align属性设置水平对齐方式,向左、右、或居中

td{ text-align:center;}

// 垂直对齐属性设置垂直对齐

td{ height:50px; vertical-align:bottom;}

  • 表格填充padding ----如果在表的内容中控制空格之间的边框,使用 td 和 th 元素的填充属性

td{

            text-align: center;

            vertical-align: top;

            padding: 20px;

}

  • 表格颜色 ---- 指定边框的颜色,和 th 元素的文本和背景颜色

table,td,th { border:1px solid green; }

td { background-color:green; color:white; }

补充:td 和 th 都属于 tr 子元素,td 表示内容单元格,是table data的意思;th 表示标题一般用在一列的第一格,里面的内容会自动加粗加黑,是table heading的意思。

<table>
    <tr>
       <th>姓名</th>
    </tr>
    <tr>
       <td>张三</td>
    </tr>
    <tr>
       <td>李四</td>
    </tr>
</table>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/9586.html
标签
评论
发布的文章

html5怎么实现语音搜索

2024-06-01 10:06:32

HTML5

2024-02-27 11:02:15

HTML - 头部元素

2024-06-01 10:06:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!