CSS基础笔记

CSS基础笔记

1.块级标签与行级标签

​ 1.块级标签: p div hr ul li h1-h6 table… 等等.

​ 2.行级标签: a span img input …

​ 块级标签与行级标签的区别:

​ 块级标签:独占一行,可以设置宽高。

​ 行级标签:不会换行,不能设置宽高。

​ img可以设置宽高。是因为它具有行内块的属性。

行与块互相转换使用display.

2.css引入方式

1.内嵌样式

2.内联样式

3.外联样式

导入样式 @import url(“文件路径”);

使用频率比较:外联 > 内联 > 内嵌

优先级:内嵌 > 内联 > 外联

3.css的注释

注释:/* */

文档注释 : /** */

4.基础选择器

选择器 解释说明
*{} 通配符选择器
元素{} 标签选择器
.类名{} 类选择器(原子类)
#id名{} ID选择器

权重问题:id>类>标签>通配符>浏览器默认样式

5.字体样式

1.基础属性

属性名 说明 属性值
font-size 设置文字大小 可以使用相对长度单位,也可以使用绝对长度单位
font-family 设置文本字体 可以同时指定多个字体,中间以逗号隔开
font-weight 设置字体粗细 normal默认属性 bold加粗 可以是单词,可以是数字100-900
font-style 字体风格 italic使用斜体样式(小众字体不支持)oblique强制定义文字倾斜

2.长度单位

相对长度单位 说明
em 相对于当前对象内文本的字体大小(相当于是正常文本大小的倍数)
px 像素,推荐使用
绝对长度单位 说明
in 英寸
cm 厘米
mm 毫米
pt

3.文本装饰

属性名 解释说明 属性值
text-decoration 文本装饰 none 默认值 , underline定义文本字体下划线 , overline定义文本字体上划线, line-through定义文本字体删除线。

4.文本对齐方式

属性名 解释说明 属性值
text-align 文本位置 center居中,left 左对齐,right 右对齐

5.行间距

属性名 解释说明
line-height 行间距,行高

6.首行缩进

属性名 属性值
text-indent 首行缩进

7.文本溢出时出现省略号

overflow:hidden; --------溢出隐藏

white-space:nowrap; --------文本变成一行显示

text-overflow:ellspsis; ---------溢出时出现省略号

**要配合使用

6.选择器

E F{ }--------派生选择器(后代)

E>F{ } -------子元素选择器

元素1,2,3{ } -------多元素组合选择器

E+F{ } ------兄弟选择器(相邻)

E~F{ }-------兄弟选择器(范围F元素全部)

!import;强制优先级

7.文字排版方式

1.文字排版方向

writing-mode:

属性值 解释说明
vertical-lr 文字从上到下,换行从左到右
vertical-rl 文字从上到下,换行从右到左

2.垂直对齐

vertical-align:

定义行内元素在容器内的垂直对齐方式

属性值 解释说明
baseline 和文字基线对齐
bottom 和文字底部对齐
top 和文字顶部对齐
middle 和文字中线对齐
super 和文字上标对齐
sub 和文字下标对齐

8.表格固定

table-layout:

属性值 解释说明
auto 默认值,单元格的大小会根据单元格里面的内容来扩大跟减小
fixed 表格固定: 会把表格里面的单元格宽度按照等分来显示

word-spacing单词间隔

letter-spacing字符间隔

9.背景

1.背景颜色

background-color

背景颜色
颜色: red blue cyan yellow green gold
6位16进制颜色编码集 #FF4466
rgb(red,green,blue)

2.背景图片

background-image

background-image:url(图片路径);

3.背景图片平铺方式

background-repeat

​ repeat 背景图片默认值
​ background-repeat:repeat;
​ no-repeat 背景图片不平铺,图片大小是什么就显示什么样
​ background-repeat: no-repeat;
​ repeat-x 图片在X轴显示
​ background-repeat: repeat-x;
​ repeat-y 图片在Y轴显示

4.背景图片大小

background-size

属性值 解释说明
auto 背景图片真实大小
cover 设置图片完全覆盖元素大小,
contain 设置图片完全在元素内,并尽可能的覆盖背景面积

5.背景位置

background-position

6.背景原点

background-origin

属性值 解释说明
padding-box 默认值 背景从边框内的左上角作为原点
border-box 背景从边框的左上角作为原点
content 背景从显示区域内容左上角作为原点

7.背景附着

background-attachment

属性值 解释说明
fixed 设置图片相对于视口滚动(位置固定不再移动)
scroll 设置背景图片跟随对象滚动(元素滚动跟着移动)
local 元素内容滚动跟着滚动

10.列表样式

1.list-style-type

属性值 解释说明
disc 实心圆
circle 空心圆
square 实心方块
decimal 阿拉伯数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
none 不使用项目符号

2.list-style-image

设置列表项的图片

list-style-image:url();

11.伪类选择器

属性名 解释说明
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 鼠标点击时的链接
:focus 获取焦点
:first-child 当选择器1选中的元素第一个子元素能够匹配选择器2时,给该子元素设置样式

12.块级与行级之间的转换

display:

属性值 解释说明
inline 转换为行内元素
block 转换为块级元素
inline-block 转换为行内快元素

1.元素显隐

display:

属性值 解释说明
none 元素隐藏
visibility: hidden 设置元素隐藏,但是保留位置

13.垂直二级导航栏

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>Documenttitle>
    <style>
        *{
     
            margin: 0;
            padding: 0;
        }
        ol li{
     
            list-style-type: none;
        }
        .a1{
     
            width: 300px;
            background-color: blanchedalmond;
        }
        .a1 li{
     
            width: 300px;
            height: 30px;
            line-height: 30px;
            background-color: blanchedalmond;
        }
        .a1 li:hover{
     
            background-color: rgb(221, 145, 32);
        }
        .a2{
     
            width: 300px;
            margin-left: 300px;
            margin-top: -30px;
            display: none;
        }
        .a2 li,.a3 li,.a4 li,.a5 li,.a6 li{
     
            background-color: blueviolet;
        }
        .a2 li:hover{
     
            background-color: rgb(152, 138, 166);
        }
        .a1 li:hover ol{
     
            display: block;
        }
        .a3{
     
            width: 300px;
            margin-left: 300px;
            margin-top: -60px;
            display: none;
        }
        .a4{
     
            width: 300px;
            margin-left: 300px;
            margin-top: -90px;
            display: none;
        }
        .a5{
     
            width: 300px;
            margin-left: 300px;
            margin-top: -120px;
            display: none;
        }
        .a6{
     
            width: 300px;
            margin-left: 300px;
            margin-top: -150px;
            display: none;
        }
    style>
head>
<body>
    <ol class="a1">
        <li>一级导航
            <ol class="a2">
            <li>二级导航li>
            <li>二级导航li>
            <li>二级导航li>
            <li>二级导航li>
            <li>二级导航li>
        ol>li>
        <li>一级导航
            <ol class="a3">
                <li>二级导航li>
                <li>二级导航li>
                <li>二级导航li>
                <li>二级导航li>
                <li>二级导航li>
  

你可能感兴趣的:(css,前端,css3)