CSS - 2

CSS - 2

CSS三大特性

1. 层叠性

样式冲突：元素的同一个样式名，设置了不同的值

如果发生了样式冲突，会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）

2. 继承性

元素会自动拥有其父元素 或 其祖先元素上设置的某些样式

规则：优先继承离得近的

常见可继承属性：

text-?, font-?, line-?, color

3. 优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * >继承的样式

div>p{ /* (0,0,2) */
    
}
/* 并集选择器的每一个部分分开计算 */
div,p{ /* (0,0,1) */
    
}
/* 等于 */
div{} /* (0,0,1) */
p{} /* (0,0,1) */

像素与颜色

rgb

.color1{
    color: rgb(255,0,0);
}
.color2{
    color: rgb(100%,0%,0%); /* 三个表示方法要统一 */
}

rgba

.color3{
    color: rgba(255,0,0,0.5); /* 透明度：0(完全没有) - 1 */
}
.color4{
    color: rgba(255,0,0,50%);
}

HEX与HEXA

.color5{
    color: #ff0000; /* red */
}
.color7{
    color: #ff000088; /* 半透明red */
}
.color8{
    color: #f008; /* 半透明red */
}

不区分大小写

IE不支持HEXA

HSL与HSLA

color: hsl(色相, 饱和度, 明度);

色相 - 角度：0deg（红）；360deg（红）

饱和度：0%（黑白）；100%

亮度：0%；100%（一般写50%）

.color9{
    color: hsl(0deg, 100%, 50%); /* red */
}

字体

字体大小

浏览器有默认字体大小，所以要给一个具体的值

Chrome：默认16px，最小12px（0不展示）

body{
    font-size: 20px;
}

注意：

由于字体设计的原因，文字最终呈现的大小，并不一定与 font-size 的值一致，可能大也可能小

通常情况下，文字相对字体设计框并不是垂直居中的，通常靠下一些

字体族

.ff1 {
    font-family: "微软雅黑"; /* 默认 */
}
.ff2 {
    font-family: "微软雅黑","楷体","宋体"; /* 一个一个找 */
}

方便电脑寻找，兼容性更好 - 写英文

.ff3 {
    font-family: "Microsoft Yahei"; /* 写英文 */
}

  • 衬线字体：横竖撇捺棱角强烈

  • 非衬线字体（网页中常用）

 /* 写一类 */
.ff4 {
    font-family: "HanziPen SC","STHupo","Microsoft Yahei",sans-serif;
}

sans-serif: 找一个非衬线

serif: 找一个衬线

字体风格

.fs1 {
    font-style: normal;
}
.fs2 {
    font-style: italic; /* 寻找设计的斜体，没有再强制将正常字体倾斜 */
}
.fs3 {
    font-style: oblique; /* 强制将正常字体倾斜 */ 
}

推荐 italic

字体粗细

.fw1 {
    font-weight: lighter; /* 100-300 */
}
.fw2 {
    font-weight: normal; /* 400-500 */
}
.fw3 {
    font-weight: bold; /* >600 */
}
.fw4 {
    font-weight: bolder; /* 微软雅黑没有设计bolder */
}
.fw5 {
    font-weight: 100; /* 100-1000，但设计字体的人不会这么细 */
}

字体符合属性

顺序：字体大小 - 倒数第二，字体族 - 最后

.f1 {
    font: bold italic 100px "STCaiyun","Microsoft Yahei",sans-serif;
}

文本

文本颜色

color

文本间距

.ls1 {
    letter-spacing: 20px;/* 字母间距（汉字√） */
}
.ls2 {
    word-spacing: 20px;/* 单词间距（汉字×） */
}
.ls1 {
    letter-spacing: -1px;/* 可以给负值 */
}

文本修饰

.td1 {
    text-decoration: overline;
}
.td2 {
    text-decoration: underline dotted red; /* 虚线（没有顺序要求） */
}
.td3 {
    text-decoration: line-through wavy; /* 波浪线 */
}
.td4 {
    text-decoration: none;
}

文本缩进

.ti {
    font-size: 60px;
    text-indent: 120px; /* 缩进2 */
}

文本对齐

div {
    font-size: 20px;
    background-color: orange;
    text-align: center; /* left right */
}

文本属性

  • 行高
line-height: 100px;
line-height: normal; /* 默认，浏览器会给一个合适的行高 */
line-height: 1.5; /* 1.5x40=60px */
line-height: 150%;

注意：

  1. 行高应该大于font-size，最小值为0，不能为负数

  2. 行高可以继承

<div id="hg">
    hello, <span>world</span>!
</div>

#hg {
    font-size: 40px;
    line-height: 1.5;
}
span {
    font-size:200px;
    /* 继承: line-height: 1.5; 200x1.5=300 */
}

​ 设置了 height (容器高度)，高度就是 height 的值；没有设置 height ，高度就是 line-height (一行高度) * 行数

行高应用场景

  • 多行文字的间距调整

  • 单行文字的垂直居中

    #d {
    font-size:40px;
    height:50px;
    line-height:50px;
}

  • vertical-align

一个文字由如下四条线组成；行高由上边框+下边框+文字内容组成

在这里插入图片描述

通过vertical-align 控制图片和文字的垂直关系

模式 单词
基线对齐：默认的是文字和图片基线对齐 vertical-align: baseline;
垂直居中：默认的是文字和图片基线对齐 vertical-align: middle;
顶部对齐：默认的是文字和图片基线对齐 vertical-align: top;
在这里插入图片描述 
span {
    font-size: 40px;
    background-color: orange;
    vertical-align: top; /* bottom baseline(默认值) middle */
}

注意：不能控制块元素

列表

列表属性

ul {
    /* 列表符号 */
    list-style-type: none; /* decimal 1.2.3. */
    /* 列表符号的位置 */
    list-style-position: outside; /* inside */
    /* 自定义列表符号 */
    list-style-image: url("../images/video.gif");
    
    /* 复合属性（没有顺序） */
    list-style: decimal inside url("../images/video.gif");
}

表格

边框属性

table {
    /* 3个属性要全部设置才能显式边框 */
    border-width: 2px;
    border-color: green;
    border-style: solid; /* dotted double */
    
    /* 复合
    border: 2px green solid*/
}

td, th {
    border: 2px green solid
}

边框相关的属性，不仅表格能用，其它元素也能用

表格独有属性

table {
    /* 控制表格列宽 */
    table-layout: auto; /* auto默认(根据列宽内容计算) fixed(固定列宽 平均分) */
    /* 控制单元格间距(前提：单元格不能合并) */
    border-spacing: 0px;
    /* 合并相邻单元格的边框 */
    border-collaspe: separate; /* 合并：collapse  */
    /* 隐藏没有内容的单元格(前提：单元格不能合并) */
    empty-cells: hide;
}

背景

div {
    /* 设置背景图片 */
    background-image: url(../images/img.jpg);
    /* 设置背景图片的重复方式 */
    background-repeat: repeat-x; /* repeat(默认) repeat-y no-repeat */
    /* 控制背景图片的位置 */
    background-position: left top;
    /* background-position: 70px 120px */
}

鼠标

div {
    cursor: poiter; /* move wait crosshair help */
}

常用长度单位

css中设置长度必须加单位

#d1 {
    width: 200px;
    height: 200px;
    font-size: 20px;
    background-color: skyblue;
}

/* em: 相对于当前元素或父元素的font-size倍数 */
#d2 {
    width: 10em;
    height: 10em;
    font-size: 20px; /* 没有写font-size会一层一层向上找 */
    font-indent: 2em; /* 缩进2 */
    background-color: skyblue;
}

font-size=1em 找父元素的 font-size * 1

/* rem: 相对于根元素html的font-size的倍数 */
#d3 {
    width: 10rem;
    height: 10rem;
    font-size: 20px;
}

/* %: 相对其父元素的百分比 */
.inside {
    width: 50%;
    height: 50%;
    font-size: 150%; /* 30px */
}

元素的显式模式

块元素

  • 独占一行，从上到下排列

  • 默认宽度：撑满整个父元素

  • 默认高度：由内容撑开

  • 可以通过css设置宽高

    主体结构标签 <html> <body>

    排版标签 <h1>~<h6> <hr> <p> <pre> <div>

    列表标签 <ul> <ol> <li> <dl> <dt> <dd>

    表格标签 <table> <thead> <tbody> <tfoot> <tr> <caption>

    标签标签 <form> <option>

    <div>

行内元素

  • 不独占一行，一行中容纳不下的元素，会在下一行从左到右排列

  • 默认宽度：由内容撑开

  • 默认高度：由内容撑开

  • 不能通过css设置宽高

    文本标签 <br> <strong> <em> <sub> <sup> <del> <ins>

    <a> <label>

    <span>

行内块元素

  • 不独占一行，一行中容纳不下的元素，会在下一行从左到右排列

  • 默认宽度：由内容撑开

  • 默认高度：由内容撑开

  • 可以通过css设置宽高

    图片 <img>

    表格单元格 <th> <td>

    表单控件 <input> <textatea> <select> <button>

    框架标签 <iframe>

修改元素的显式模式

div {
    display: inline; /* block inline-block none */
}
posted @ 2024-11-26 17:03  wajiez  阅读(15)  评论(0)    收藏  举报