CSS基础

最新推荐文章于 2024-09-16 23:39:36 发布

!flameking

最新推荐文章于 2024-09-16 23:39:36 发布

阅读量118

点赞数 3

分类专栏：前端开发技术文章标签： css html

本文链接：https://blog.csdn.net/qq_48299903/article/details/119304460

版权

前端开发技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Cascading Style Sheet：层叠样式表，用来控制网页外观的技术

CSS引入方式

外部样式表 CSS代码单独作一文件，并在HTML文件中通过link引入

<head>
    <link rel="stylesheet" type="text/css" href="CSS文件路径">
</head>

内部样式表
在style中自定义

<head>
    <style text="text/css">
        div{text-align: center}
    </style>
</head>

行内样式表
在标签的style属性中定义

选择器

选用指定的标签，定义CSS样式

<head>
    <style>
        <!-- 元素 -->
        div{
            height: 640px;
            /*width: 640px;*/
            border-width: 30px;
            border-style: solid;
            border-color: hotpink;
        }
        <!-- class -->
        .out{
            position: relative;
            left: 239.6px;
            right: 239.6px;
        }
        <!-- 后代：father下的所有div标签 -->
        #father div{
            width: 800px;
            height: 600px;
            background-color: white;
        }
        <!-- id -->
        #away{
            clear: both;
        }
        <!-- 群组 -->
        div,p,span,.out,#father{
            color: red;
        }

    </style>
</head>

元素选择器
id 唯一标识一个标签,引用时需用#标识
class 可标记多种标签，class值相同的标签共用同一种样式，需用.标识
后代选择器
群组选择器

字体样式

font-family:“宋体”，“Time New Roman”，Arial 可以定义多个，按顺序优先使用已安装的字体
字体大小：font-size:10px
font-style:normal(默认)，italic(斜体)，oblique(斜体)
font-weight:normal(默认)，lighter(较细)，bold(较粗)，bolder(很粗)
color:red，#FBF9D0(RGB值)

文本样式

首行缩进：text-indent:2倍字体像素值
水平对齐：text-align:center，left，right 对文本和图片均有效
text-decoration:none,underline，line-through，overline 去除划线效果（超链接下划线效果去除），下划线，删除线，顶划线
大小写转换：text-transform:none,uppercase,lowercase,capitalize(首字母大写)
行高：line-height:10px 有行间距的效果
字间距，单词间距：letter-spacing:10px,word-spacing:10px * 一个中文汉字和一个英文字母都算一个字*

边框样式

几乎所有标签都可以定义边框

border-width:10px
border-style:
- none 无（边框将不存在）
- dashed 虚线
- solid 实现
border-color

一般定义用简写：boder:1px solid red 另外还包括局部边框：border-top,border-bottom,border-left,border-right

列表样式

list-style-type:
1. 对ol标签
  - decimal （1，2，···）
  - lower-roman （i，iii，···）
  - upper-roman
  - lower-alpha （a,b,···）
  - upper-alpha
2. 对ul标签
  - disc
  - circle
  - aquare
3. 去除列表符号
  - ol,ul{list-style-type:none;}
  - 自定义列表符号
    ol,ul{list-style-image:url(图片路径);}

表格样式

表格标题位置：caption-side:top,bottom
表格边框合并：border-collapse:collapse,separate 合并，默认
表格边框间距：border-spacing:8px

图片样式

图片大小
- weight
- height
图片边框
边框样式
图片对齐
文本水平对齐样式 在img标签的父标签种定义才能生效
浮动
img{float:left/right} 修饰后的块可与其他块共处一行

背景样式

背景图片地址：background-image:url(图片路径) 引入背景图片之前要先定义块的大小，至少与图片大小相同，图片才能正常显示
图片重复：background-repeat
- repeat（默认）
- repeat-x，repeat-y（水平或垂直方向平铺）
- no-repeat （不平铺）
图片位置：background-position:水平距离垂直距离(相对于页面左上角)
- 像素值语法
- 关键词语法
图片固定：background-attachment:scroll,fixed（图片随页面一起滚动，固定不动）
背景颜色：background-color

超链接样式

超链接伪类
1. a:link 未访问样式
2. a:visited 已访问后
3. a:hover 鼠标经过的样式另外它也可以定义其他标签在鼠标经过时的样式，如div:hover，img:hover
4. a:active 鼠标点击激活时的样式

鼠标样式

cursor:default,pointer,text (默认箭头样式，手状样式，I样式)

自定义鼠标样式

cursor:url(图片地址,通常是.cur文件),pointer/default/text

CSS盒子模型

页面中的所有标签都可看成一个盒子，占据着一定的页面空间

context
padding内边距：定义文本在块中的相对位置
1. div{padding-top:8px;padding-right:9px;padding-bottom:10px;padding-left:11px;}
2. div{padding:8px 9px 10px 11px} 效果同上
3. div{padding:8px 10px}=div{padding-top:8px;padding-bottom:8px;padding-right:10px;padding-left:10px;}
4. div{padding:8px}=div{padding-top:8px;padding-bottom:8px;padding-right:8px;padding-left:8px;}
margin外边距：块与块之间的相对距离，格式同 padding
border
weight，height在块标签中可以生效，行内标签无法生效

布局

定位页面中的标签

浮动布局
float:left/right
清除浮动布局
clear:both,left,right
定位布局(定义顺序)
1. position:fixed,relative,absolute,static 固定定位（相对于浏览器左上角），相对定位（相对于标签原来位置），绝对定位（相对于浏览器左上角），静态定位（默认）
2. top
3. bottom
4. left
5. right