CSS样式

CSS应用方式

1 在标签上

<table border="1">
 
</table>

2 在head标签里

<head>
<style>
    img {
    float: right;
    }
</style>
</head>

3 在文件中

<link  rel="stylesheet"   href="/css文件路径/bootstrap.css">

CSS选择器(应用范围)

1 ID选择器

 #c1

2 类选择器（最常用）

.c1       
class='c1'

3 标签选择器

 li{color:pink;}

4 属性选择器    

input[type='text']{border:1px solid red;}

5 后代选择器      

.c1 a{color: pink;}

CSS基本样式

1 高度和宽度

注：宽度支持百分比，行内标签内默认无效；高度不支持百分比

height: 59px;
width: 300px;
border: 1px solid red;

2 行内标签+块级标签魔改

display：inline-block;      
display：inline;     
display：block;

3 字体设置

color: red;                    #颜色
font-size: 80px;               #大小
font-weight: 400;              #加粗
font-family: Microsoft yahei;  #字体
text-decoration: none;         #去掉a标签的默认下划线
c1:hover{color: white;}        #增加a标签的鼠标滑选底色

4 文字对齐方式

text-align: center;     #水平居中    
line-height: 59px;      #垂直居中

5 浮动

style='float：right'   
style='clear：both'      #撑起父级标签使之自适应

6 内边距padding

pandding-top: 20px;
pandding-left: 20px;
pandding-right: 20px;
pandding-bottom: 20px;
pandding: 20px;                  #简单设定周围边距
pandding：20px 10px  5px 20px;   #按照上-右-下-左设定边距

7 外边距margin（同上）

8 透明度

opacity：0.5

9 clearfix伪类（与鼠标滑动相关）

.clearfix:hover{}
.clearfix:after{}

10 position

position：fixed       #固定位置
position：relative；  #相对位置
position：absolute；

11 边框

 border：2px solid red;

12 背景色

 background-color：#5f5750;

 

posted @   dustfree  阅读(11)  评论(0)  编辑  收藏  举报
相关博文：
·  web前端一览
·  html标签
·  CSS简介及常用样式
·  css样式
·  css样式基本知识
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示