CSS第二章 CSS样式属性

最新推荐文章于 2024-06-03 23:30:08 发布

guanerkoushi

最新推荐文章于 2024-06-03 23:30:08 发布

阅读量361

点赞数

分类专栏： Web开发文章标签： css

本文链接：https://blog.csdn.net/Xiaolei233/article/details/116435765

版权

这篇博客主要介绍了CSS的样式属性，包括文字样式、背景样式、边框样式、段落样式和复合样式。重点讲解了背景图的平铺方式、背景位置、边框样式以及如何利用边框创建三角形。同时提到了CSS复合样式的使用技巧，并提醒避免混写。

摘要由CSDN通过智能技术生成

软测的了解前几个就ok。

CSS样式属性

二、CSS样式属性

二、CSS样式属性

基本样式先介绍俩：
width : 宽
height : 高

长度单位 : 
    1. px -> 像素
    2. % -> 百分比    
        外容器1 -> 600px  当前容器 50% -> 300px
        外容器2 -> 400px  当前容器 50% -> 200px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
     width : 25% ; height : 100px ; background-color: red }
       /*  span{ background-color:blue;} */
    </style>
</head>
<body>
    <div>这是一个块</div>
    <div>又是一个块</div>
    <span>这是一个内联</span>
</body>
</html>

2.1 CSS文字样式

在这里插入图片描述

注：
-font-family：
1.英文字体(例:Arial)只针对英文文本，中文字体(例:微软雅黑)对英文/中文都会起作用。
2.代码里经常设置多个字体类型，其实就是备选方案，实际哪个显示出来以每个人的电脑适配为主。
3.有的字体类型要用双引号包裹起来，是因为其中出现空格，例如“TImes New Roman”，而Cambria就不需要双引号。

-font-size：
1.除了通过像素px设置，还可以通过单词；medium默认是16px；这种方法了解即可
2.字体大小一般设为偶数，母的：更好的实现文字对齐
在这里插入图片描述
-font-weight：
1.通过设置数值 (100,200,300，……900) 100到500都是正常的，600-900是加粗的
2.通过单词：正常(normal) 加粗(bold)

-font-style：
1.通过单词：正常(normal) 斜体(italic) 这俩用的多
oblique也表示斜体，用的较少，了解即可。区别在于：1)italic 带有属性倾斜字体的才可以设置倾斜操作。2)oblique 没有倾斜属性的字体也可以设置请写操作。

当选择器样式表和类样式表做结合，共有的属性会做覆盖(后者覆盖前者)，不同的属性会做融合。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式表03</title>
    <style>
        p {
    font-size: 20px;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;text-align: left;}
        .test02 {
    color: violet;font-size: 40px;}
    </style>
</head>
<body>
    这是没有任何修饰的第一句话<br><br>
    <p>我是有修饰的第二句话</p>
    <p class="test02">我是有修饰的第三句话</p>
</body>
</html>

在这里插入图片描述

2.2 CSS背景样式

在这里插入图片描述
background-color 背景色
background-image 背景图
        url(背景地址)
        默认：会水平垂直都铺满背景图
background-repeat 平铺方式
        repeat-x x轴平铺
        repeat-y y轴平铺
        repeat ( x , y 都进行平铺，默认值 )
        no-repeat 都不平铺
background-position : 背景位置
        x y : number(px、%) | 单词
        x : left、center、right
        y : top、center、bottom
background-attachment : 背景图随滚动条移动的方式
        scroll : 默认值 ( 背景位置是按照当前元素进行偏移的 )
        fixed ( 背景位置是按照浏览器进行偏移的 )

注：对比html中颜色bgcolor和背景background：html会对尺寸不合的图片直接重叠显示，直接填充满。而css样式表中可以指定图片的平铺方式。和img标签的区别：img标签一般用来展示；背景图一般用来作装饰性图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景</title>
    <style type="text/css">
        body {
    background-color:pink;}
        h3 {
    background-color: plum;}
    </style>
</head>
<body>
    <h3>我是h3标签</h3>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景</title>
    <style type="text/css">
        body {
    background-image: url(./img/qing.png);background-repeat: repeat-x;}
    </style>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name

最低0.47元/天解锁文章

guanerkoushi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS第二章 CSS样式属性

这里写目录标题三、CSS样式属性3.1 CSS文本样式3.2 CSS背景样式软测的了解前几个就ok。三、CSS样式属性基本样式先介绍俩：width : 宽height : 高长度单位 : 1. px -> 像素 2. % -> 百分比外容器1 -> 600px 当前容器 50% -> 300px 外容器2 -> 400px 当前容器 50% -> 200px<!DOCTYPE html&
复制链接

扫一扫

专栏目录