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

相关推荐
DanB247 分钟前
html复习
javascript·microsoft·html
像风一样自由202011 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css
paid槮11 小时前
HTML5如何创建容器
前端·html·html5
拾光拾趣录12 小时前
HTML行内元素与块级元素
前端·css·html
奶丝兔蜜柚14 小时前
物理像素&逻辑像素&DPR
css
还是大剑师兰特20 小时前
CSS面试题及详细答案140道之(41-60)
前端·css·大剑师·css面试·css示例
精神小伙2号21 小时前
css position
前端·css·html
鲸落✗21 小时前
黑色风格音乐播放器网站模板(附完整源码)
前端·html·web
东华果汁哥21 小时前
【URL 转换为PDF】HTML转换为PDF
前端·pdf·html
PanZonghui1 天前
移动端适配全景指南:从原理到实战的完整解决方案
前端·javascript·css