初识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

相关推荐
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
猫爪笔记6 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
风尚云网7 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
佚先森8 小时前
2024ARM网络验证 支持一键云注入引流弹窗注册机 一键脱壳APP加固搭建程序源码及教程
java·html
Myli_ing8 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
FØund40410 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
酷酷的威朗普10 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
渊兮兮10 小时前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
一棵开花的树,枝芽无限靠近你10 小时前
【PPTist】添加PPT模版
前端·学习·编辑器·html
土豆湿11 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css