css基础实践

最新推荐文章于 2021-12-02 14:16:36 发布

VIP文章 Always_Love

最新推荐文章于 2021-12-02 14:16:36 发布

阅读量450

点赞数 1

分类专栏：标签 css 文章标签： css

本文链接：https://blog.csdn.net/Always_Love/article/details/102708453

版权

一、css 层叠样式表
样式表的引用方式：
1、行内样式表

2、页面内样式

3、外部样式表

优先级：
行内>页面内>外部样式表
**************************************************、
color:red; //字体颜色：红色

text-align:center; //文本居中 left/center/right/justify 左/中/右/两端对齐
font-weight:bold; //字体加粗 bold/bolder
font-style: italic; //字体倾斜
text-decoration: underline/none; //下划线/去掉下划线

font-size:19px; //字体大小：19像素；
font-family:宋体；

font:19px 宋体; //字体大小字体；

background:背景颜色背景图片背景是否重复背景定位位置
//背景图片 url(图片路径)
// 是否重复 repeat/no-repeat/repeat-x/repeat-y 重复/不重复/水平重复/垂直重复
//背景定位位置 left/center/right 水平左中右 top/center/bottom 垂直上中下

background-size:精确像素/百分比 /em/rem 背景图片大小控制
background-attachment: scroll; //背景图片固定定位 scroll 滚动 fixed 固定

        width:400px;  宽度
        height:300px;   高度
        border:solid 1px #000;  边框线 ：实线  线粗细 线颜色

线型：solid 实线 double 双线 dotted 点状线 dashed 虚线 none无边框线
————————————
border-style 值:

none: 默认无边框
dotted: 定义一个点线框
dashed: 定义一个虚线框
solid: 定义实线边界
double: 定义两个边界。两个边界的宽度和border-width的值相同
groove: 定义3D沟槽边界。效果取决于边界的颜色值
ridge: 定义3D脊边界。效果取决于边界的颜色值
inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
outset: 定义一个3D突出边框。效果取决于边界的颜色值
————————————

1、类选择器的定义方式(可以多次调用)
命名：
.name{}
调用：

2、标签选择器的定义方式（只要符合标签，都自动调用）
命名：
标签名{} // p{}
调用
<标签>

3、ID选择器定义方式（只能调用一次）
命名：
#name{}

调用：

网面中图片格式：jpg gif png webp

填充：
padding-top
padding-left
padding-right
padding-bottom
简写：
padding:值

padding:a
一个值表示四边相同的填充
padding:a b;
两个值表示上下是a，左右是b
padding:a b c;
三个值表示上是a,左右是b,下是c
padding:a b c d;
四个值表示：上，右，下，左

边距：
margin-top
margin-left
margin-right
margin-bottom
简写：
margin:值

margin:a
一个值表示四边相同的填充
margin:a b;
两个值表示上下是a，左右是b
margin:a b c;
三个值表示上是a,左右是b,下是c
margin:a b c d;
四个值表示：上，右，下，左

*{ //通配符
margin:0;
padding:0;}

行高 ling-height 行间距
一般用行高布局垂直对齐方式
行高和高度一致，内容在垂直正中间
行高比高度大，内容在偏下
行高比高度小，内容偏上

首行缩进
text-indent:2em; 首行缩进两个字符

单位：
px 像素 % 百分比 em rem

颜色
red #ff0000 #f00 rgb(255,0,0)

#000000 黑色 #ffffff / #fff白色 #ff0000 / #f00 红色 #00ff00 /#0f0 绿色 #0000ff / #00f蓝色 #aaa #999 #666 灰色

浮动：

float:left /right 左浮动、右浮动
margin:0 auto;水平居中

文本转换 text-transform:uppercase/lowercase/capitalize
大写、小写、首字母大写
列表：
list-style-type 列表样式
list-style-image 列表图片
list-style

二、第二部分
类选择器
ID选择器
标签选择器

伪类选择器：
超链接四种状态

a:link 访问前的状态
a:hover 鼠标悬停时状态
a:active 鼠标点击时的状态
a:visited 访问后的状态

后代选择器
格式：父元素/祖先元素子元素
eg : div a / .nav a

行内元素(内联元素) a span input img label select strong b
块级元素 div p h1~h6 table ul ol dl form pre

display:block; 转换为块级元素（占一行）
display:inline-block; 转换为行内块（宽高起作用）
display:inline; 转换为行内元素（占内容位置）

父子选择器

格式：父元素>子元素
eg: .box>a
display：block 显示
display:none 隐藏

visibility: hidden;隐藏
visibility:visible; 显示

display和visibility区别：
display隐藏不占位置
visibility隐藏占位置
盒子模型
布局：
1、浮动流
2、标准流
3、浮动+标准流＝混合流

三、实践例子
1、例子一
代码：
html部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<div id="header">
    <div class="logo fl">
        <a href=""><img src="images/logo.gif" alt=""/></a>
    </div>
    <div class="nav fr">
        <a href="" class="active">首 页</a>
        <a href="">集团概况</a>
        <a href="">新闻中心</a>
        <a href="">产品服务</a>
        <a href="">企业文化</a>
        <a href="">综合业务</a>
        <a href="">品牌建设</a>
        <a href="">人力资源</a>
        <a href="">国际合作</a>
    </div>
</div>
<!--banner

最低0.47元/天解锁文章

Always_Love

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
css基础实践

一、css 层叠样式表样式表的引用方式：1、行内样式表2、页面内样式 3、外部样式表优先级：行内>页面内>外部样式表**************************************************、color:red; //字体颜色：红色text-align:center; //文本居中 left/center/right/...
复制链接

扫一扫