CSS常见样式

最新推荐文章于 2024-08-10 22:43:21 发布

实力比头发更重要

最新推荐文章于 2024-08-10 22:43:21 发布

阅读量103

点赞数

分类专栏： Web前端开发文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_62217723/article/details/126214249

版权

Web前端开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

一、为网页添加样式
二、常见的样式

一、为网页添加样式

术语解释

        h1{
            color:red;
            background-color:lightblue;
            text-align: center;
        }

CSS规则=选择器+声明块

选择器

选择器：选中元素

ID选择器：选中的是对应id值的元素
元素选择器
类选择器(非常灵活)

    <style>
        .red{     /*这是一个类*/
            color:red;
            font-size: 2em;
        }
        .big-center{  /*另外一个类*/
            font-size: 3em;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 class="red">
        现在开始添加样式
    </h1>
    <p class="big-center">
        this is a test.
    </p>
    <p class="red">
this is the second test.
    </p>

声明块

出现在大括号中
声明块中包含很多声明（属性），每个声明（属性）表达了某一方面的样式。

CSS代码书写位置

内部样式
书写style元素中
内联样式表，元素样式表[不推荐]
直接书写在元素的style属性中
外部样式表[推荐]
将样式书写到独立的css文件中
1）外部样式表可以解决多页面重复的问题
2）有利于浏览器缓存，从而提高页面响应速度
3）有利于代码分离，html,css ;更利于页面维护

二、常见的样式

color
元素内部的文字颜色
预设值：定义好的单词
三原色，色值：光学三原色（红绿蓝），每个颜色可以使用0-255之间的数字来表达，色值。

rgb表示:
color:rgb(0,255,0);  rgb是红绿蓝
hex(16进制)表示：
#红绿蓝
color:#008c8c;

淘宝红：#ff4400;#f40
黑色：#000000;#000
白色：#ffffff,#fff
红：#ff0000;#f00;
绿：#00ff00;#0f0;
蓝：#0000ff;#00f
紫色：#f0f
青色：#0ff
黄：#ff0
灰色：#ccc

## 在CSS里快捷键ctrl+?就是注释

background-color
元素背景颜色
font-size
元素内部文字的尺寸大小
1）px:像素,简单的来说就是文字的高度占多少个像素
2)em:相对单位，相对于父元素的字体大小
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素，则使用基准字号（浏览器设置字号）

user agent:用户代理（浏览器）

font-weight
文字粗细程度，可以取值数字，可以取值为预设值
不加粗：normal;
加粗：bold;

strong:默认加粗

font-family
文字字体（类型）
必须计算机中存在的字体才会有效

font-family：consolas(只能用于英文),翩翩体-简，微软雅黑…sans-serif；//如果没有consolas，就翩翩体-简，如果还没有翩翩体-简，就微软雅黑

sans-serif:非衬线字体

font-style
字体样式，通常用他设置斜体（italic）;

i元素，默认样式是倾斜字体；实际上使用中，通常用它表示一个图标（icon）

text-decorstion
文本修饰，给文本加线
text-decorstion：line-through,overline
underline

a元素，
del元素:表示错误的内容
s元素：表示过期的内容

line-height
每行文本的高度，该值越大，每行文本距离越大。
设置行高为容器高度，可以让单行文本垂直居中
行高可以设置为纯数字，表示相对与当前元素的字体大小
width
宽度
height
高度
letter-space
文字间隙（px,em）
text-indent
首行文本缩进
test-align
元素内部文字的水平排列方式