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

相关推荐
小白白一枚1118 小时前
css实现div被图片撑开
前端·css
@蒙面大虾8 小时前
CSS综合练习——懒羊羊网页设计
前端·css
顾菁寒9 小时前
WEB第二次作业
前端·css·html
Qhumaing9 小时前
html第一个网页
网络·html·html5
荆州克莱11 小时前
[FE] React 初窥门径(四):React 组件的加载过程(render 阶段)
spring boot·spring·spring cloud·css3·技术
前端Hardy14 小时前
HTML&CSS:爱上班的猫咪
前端·javascript·css·vue.js·html
聚宝盆_16 小时前
【css flex 多行均分有间隙布局】
前端·css
零希16 小时前
CSS元素类型(二)
前端·javascript·css
煎饼果子呀16 小时前
css-flex布局属性
开发语言·前端·css·html5
沈阳-施立17 小时前
CSS例子: 胶囊按钮
前端·css