初识CSS(二)

1.选择器

1.1基础选择器

  • 标签选择器(元素)

h1{

font-weight:bold;

}

  • ID选择器

#id名称{

color:gray;

}

通常用于is中

  • 类选择器(class)

.class名称{

font-size:20px !important; //优先级最高

line-height:; /行高,p中自动有设置

}

在css中应用广泛

1.2.选择器优先值

!important>id>class>元素>浏览器默认样式

1.3.层次选择器

  • 后代选择器(子孙) 有div中的所有p标签才满足

div p{

fnt-size:30px;

}

  • 子选择器(儿子) eg div > p 离div最近的一层p 只选择第一代元素

div >p{

fnt-size:30px;

}

  • 群组选择器(分组) 多个内容都选择

div,h1,p{

color:red;

}

1.4.统一设置页面

*{

margin:0;

padding:0;//去掉边距

font-size:20px;

}

2.基础属性

2.1背景

  • backgroud-color: //背景颜色

red;

#ffbb55(可简写为#fb5)

rgb(255,0,0)

rgba(255,0,0,5)

HSL(色调,饱和度,明度)

  • backgroud-image: //背景图片路径

url('png/img/bg')

注:背景图片和颜色只能选择其一

  • backgroud-repeat: //背景图片是否平铺以及平铺样式

    repeat; //default

    no-repeat; //不平铺

    repeat-x; //水平平铺

  • bckgroud-position: //背景图片位置

left bottom; //左里部

right top; //右上角

x%y%; //左上角是0%0%,右下角是100%100%

xpos ypos //像素(不是响应式布局,是一种绝对位置,有可能超出背景)

  • backgroud-attachment: //背景图片滚动

scroll; //

2.2文本

  • color: 同上背景颜色定义

  • text-align:

    left; default

    right;

    center;

  • text-decoration:

none; fault

underline; //下划线

line-through; //穿过文本的一条线

  • line-height: //行高,直接设置值即可

%

倍数

  • text-shadow: //阴影,设置艺术字

水平位置偏移量 垂直位置偏移量 模糊半径 阴影颜色

  • direction: //垂直方向排列

ltr; //default

rtl; //从左到右

2.3字体

  • font-size:

16px;

1.5em;

150%

em 单位,1em=16px 使用px较少,因为px大小为绝对值,em可以自动缩放,是一种响应式布局

  • font-family: //字体

"宋体"

"微软雅黑" 谷歌浏览器默认值

"Times New Roman"

"黑体"

  • font-style:

    italic; //斜体,等价于<em>

  • font-weight:

normal; //default

bold; //700

2.4链接(以下适用于所有selector)

  • a:link 未访问

  • a:visited 已访问

  • a:hover(必须在前两个之后)鼠标悬停

  • a:active(必须在上一个之后) 鼠标点击

2.5列表

  • 属性 list-style-type

none 文字前无任何样式标记

disc 无序默认 实心圆点

decimal 有序默认 数字

  • list-style-image:

url('logo.png') 根据项目文字或内容大小,先处理图片大小

2.6display: //显示 块元素和内联元素

  • 隐藏元素:

h1.hidden{visibilty:hidden;}

h1.hidden{display:none;}

  • none

  • inline

  • inline-block

  • block

  • flex(弹性盒子模型)

  • visibility:hidden

2.8 表格

border-collaspse: collapse;

border: 1px solid black;

2.9盒子模型

  • margin

left

top

right

bottom

  • border

border-

border-

none

dotted

dashed

double

border-

  • padding

left

top

right

bottom

2.10定位(位置的四个属性如果没有position属性声明,是无用的)

  • position

static 静态定位,默认无定位

absolute 绝对定位

relative 相对定位

fixed

  • left

px/em/vh.vw/%/vmin/vmax

  • top

  • right

  • bottom

相关推荐
十盒半价1 小时前
Stylus 伪元素:让 CSS 玩出 “无中生有” 的新花样
前端·css·trae
web守墓人4 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L4 小时前
CSS知识复习5
前端·css
Liudef069 小时前
儿童趣味记忆配对游戏
css·游戏·css3
吉吉安17 小时前
两张图片对比clip功能
javascript·css·css3
快起来别睡了19 小时前
CSS 层叠上下文:从“谁在前,谁在后”说起
css
国家不保护废物21 小时前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
南方kenny21 小时前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试
学长学姐我该怎么办21 小时前
从零开始学前端html篇2
前端·html
程序员秘密基地1 天前
基于html,css,vue,vscode,java,springboot,mysql数据库,在线考勤,管理系统
java·vue.js·spring·html·web app