CSS学习笔记——CSS基本属性

最新推荐文章于 2023-06-04 19:27:53 发布

Brray_Jim

最新推荐文章于 2023-06-04 19:27:53 发布

阅读量225

点赞数

分类专栏： HTML/CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_25445557/article/details/82220222

版权

HTML/CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS基本属性

css格式

<style type="text/css">
        选择器名称{
            属性名称 : 属性值;
            属性名称 : 属性值;
            属性名称 : 属性值;
            ...
        }
    </style>

<style>标签一定要写在<head>标签中
属性名称和属性值是key-value的形式，其中: ;是不能省略的
type="text/css"说明了<style>标签内写的是文本格式的css代码，type属性不写的话，默认也是type="text/css"

文字属性

p{
    font-style: italic;
    font-weight:bold;
    font-size: 30px;
    font-family:"不存在的字体","微软雅黑";
    }

规定文字样式的属性，font-style，取值有
- normal：正常格式
- italic：斜体
- oblique：文字倾斜显示
- italic和oblique的区别：斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观；倾斜（oblique）文本是正常竖直文本的一个倾斜版本。通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。
规定文字粗细的属性，font-weight，取值有
- 单词
  - bold：加粗
  - bolder：加加粗
  - lighter：细线（默认格式）
- 数值：100-900之间整百取值，100就是细线
规定文字大小的属性，font-size，取值有
- 单词small，smaller，x-small，xx-small，large，larger，x-large，xxlarger
- 数值像素，单位为px
规定文字字体的属性font-famaly，取值为字体名称
- 格式为font-famaly:"微软雅黑";
- 设置的字体必须是用户电脑里已经安装的字体
- 如果设置的字体不存在，则使用备选的字体，如果都不存在则使用默认的宋体
- 由于中文字体必然包含英文字体，而英文字体必然不包含中文字体，通过这个特性可以设置font-family:Calibri,"微软雅黑";来分别设置中英文的字体。
- 常见字体：宋体/黑体/微软雅黑/Arial/Times New Roman
- 值得注意的是并不是所有英文名称的字体都是英文字体，中文字体也是有英文名的，比如说SimSun-ExtB就是宋体的英文名称
文字属性的缩写，多个属性以空格隔开，要注意的是：简写格式中size和family是不能省略的,顺序也不能颠倒，且必须写在属性的最后，即如果设置了style和weight，style和weight必须写在一开始

p{
    font: italic bold 30px "微软雅黑";
    }

文本属性

文本装饰属性：text-decoration，取值不同效果不同
- 格式text-decoration: underline;
- underline：下划线
- linethrough：删除线
- overline：上划线
- none：无效果，用去清除其他标签自带的格式，比如超链接的下划线
文本对齐属性：text-align，取值不同效果不同
- 格式text-align: center;
- center：居中
- left：居左
- right：居右
文本缩进属性：text-indent，取值不同效果不同
- 格式text-indent: 2em; ，缩进两个文字的宽度
- center：居中
- left：居左
- right：居右

颜色属性

取值有好几种模式

        p{
            color: red;
            color: rgb(255,0,0);
            color: rgba(255,0,0,1);
            color: #FF0000;
            color: #F00;
        }

英文单词
- 一般情况下常见的颜色都有对应的单词，但是单词能表达的颜色有限
RGB
- 三原色，red，green，blue三种颜色的不同亮度比例组合出不同颜色，数字取值范围为0-255，值越大亮度越高，0代表不发光。前端开发中很少使用黑色，更多情况下都是用灰色来代替黑色，灰色的rgb三原色的比例是1：1：1，比如rgb(200，200，200),数值越大越偏向白，数值越小越偏向黑。
RGBA
- CSS3新添加的，实际上就是rgb+a，a指透明度，a的取值为，0-1，值越小，透明度越高。
十六进制
- 本质其实就是rgb，每两位代表一个颜色的赋值
十六进制缩写
- 如果十六进制的格式中每两位的值都是一样的，就可以简写，比如#FFAA55就可以简写成#FA5

Brray_Jim

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记——CSS基本属性

CSS基本属性目录简介css格式文字属性文本属性颜色属性css格式&lt;style type="text/css"&gt; 选择器名称{ 属性名称 : 属性值; 属性名称 : 属性值; 属性名称 : 属性值; ... } &lt;/s...
复制链接

扫一扫