WEB前端复习——CSS

CSS:层叠样式表 将显示样式与内容分开

基本语法:

选择器{

规则;

}

①标签选择器:以HTML标签名为选择

<style>
    p{
        color: red;
    }
</style>
<body>
   <p>你好</p>
</body>

②id选择器:一次性的 以#号定义

<style>
    #p1{
        color: red;
    }
</style>
<body>
    <p>2</p>
   <p id="p1">你好</p>
</body>

③类选择器(单类、多类)用"."标识

<style>
    .p3{
        color: red;
    }
</style>
<body>
    <p>2</p>
   <p class="p3">你好</p>
</body>

(或p.p3{})

④属性选择器 a[href]{} :a标签含href才变色 a[href="URL"] 指定url的a标签才变色

派生选择器:li strong{} li元素中的strong元素样式变色


常用字体属性:

font-size:20px

font-style:italic

font-weight:bold

font-family:宋体

文本属性

text-align

列表属性

list-style-type

背景

color

background-color

background-image


HTML引入CSS

1 在<style>标签内定义

2 <div style="background-color:red"><div>

3 <head>中引入外部css文件

<head>

<title>Document</title>

<link type="text/css" rel="name" href="URL.css">

</head>


盒子模型: margin border padding content (top left right bottom)

浮动: float left right

clean:both

相关推荐
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿3 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡4 小时前
commitlint校验git提交信息
前端
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员5 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐5 小时前
前端图像处理(一)
前端