CSS(层叠样式表)——3基本样式

四种加载方式里面:即编辑{}大括号里面的内容

背景

文本

字体

列表

表格

轮播

 

案例:

<!DOCTYPE html>

<html lang="en">

        <head>

                <meta charset="UTF-8">

                <title>css_03_style</title>

                <style type="text/css">

                        body

                        {

                                /* background-image: url('az.jpg');

                                background-repeat: no-repeat; */

                                /* 如果有滚动条,背景图片不动 */

                                /* background-attachment: fixed; */

                        }

 

                        /* 背景 */

                        .backcolor_main

                        {

                                /* 背景 */

                                background:red;

                                /* 背景图片

                                        url:图片的路径:相对(相对css所处的文件路径)和绝对;

                                        repeat:重复; -x:x轴重复,-y:y轴重复;

                                 */

                                /* 合在一起写, */

                                /* background: url('az.jpg') repeat-y; */

                                background-image: url('az.jpg');

                                /* 分开写 */

                                background-repeat: no-repeat;

                                /* 图片的位置 */

                                /* background-poition:center; */

                                /* 可以写百分比 */

                                background-position: 30% 70%;

                                /* 可以写像素 */

                                background-position: 10px 30px;

                                /* 高度和宽度 */

                                /*width: 200px;*/

                                height: 200px;

                        }

 

                        /* 文本样式

                                所有的属性只要是数字都有可以填写:

                                        数字px(像素);

                                        数字%(相对于父容器的数字)

                                        数字em(相对于汉字的大小,一个网页的汉字标准大小是12px,5em,就是60px)

                         */

                        .text_main

                        {

                                /* 首个字母缩进 */

                                text-indent: 10em;

                                /* 水平对齐 */

                                text-align: center;

                                /* 批量变大写 */

                                text-transform: uppercase;

                                /* 文字间隔 */

                                letter-spacing: 10px;

                                /* 文字装饰 */

                                text-decoration: underline;

 

                                /* 字体大小 */

                                font-size: 30px;

                                /* 字体加粗 */

                                font-weight: bolder;

                                /* 轮廓和border是一样的

                            outline:#00ff00 dotted 10px;

                                        颜色 点的形状 粗细

                                 */

                                outline:#00ff00 dotted 10px;

                                /* 边框 */

                                border: 10px dotted blue;

                        }

 

                        /* 父子选择器 */

                        ul li

                        {

                                /* li左边默认的小圆圈换成图片 */

                                /* list-style-image: url(az.jpg) ; */

                                list-style: square inside;

                                background: blue;

                        }

                </style>

        </head>

        <body>

                <!-- 就是一个元素

                        div占用了一行

 

                        class:可以写多个类选择器,每个类选择器之前用空格隔开

                -->

                <div class="backcolor_main text_main">

                        这是一个div

                        这是一个div

                        这是一个div<br/>

                        这是一个div

                        这是一个div

                        这是一个div

                </div>

 

                div后面的内容

                <!-- 这也是个元素

                        span没有换行

                 -->

                <span>也是一个元素</span>

                这个是span后面的

 

                <ul>

                        <li>a</li>

                        <li>b</li>

                        <li>c</li>

                </ul>

        </body>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML(Hypertext Markup Language)是一种用于创建网页结构的标记语言,而CSS(Cascading Style Sheets)是一种用于描述网页样式样式表语言。层叠样式表CSS)用于控制HTML元素的外观和布局。 CSS的层叠性是指多个样式规则同时应用于同一个元素时,根据优先级和特定规则来确定最终的样式。以下是关于CSS层叠样式表的一些重要概念: 1. 选择器:CSS选择器用于选择要应用样式的HTML元素。常见的选择器包括标签选择器、类选择器、ID选择器等。 2. 样式规则:样式规则由选择器和一组属性-值对组成。属性定义了要应用的样式,值指定了属性的具体设置。 3. 继承:某些属性的值会被子元素继承,这意味着父元素的样式会自动应用到子元素上。 4. 优先级:当多个样式规则同时应用于同一个元素时,根据选择器的特定权重和优先级来确定最终的样式。通常,ID选择器的权重最高,其次是类选择器和属性选择器,最后是标签选择器。 5. 盒模型:CSS中的盒模型描述了HTML元素在页面中所占空间的方式。它由内容区域、内边距、边框和外边距组成。 6. 布局:CSS可以用于控制元素的位置和布局。通过设置元素的定位、浮动、清除浮动等属性,可以实现不同的布局效果。 7. 响应式设计:CSS可以用于创建响应式网页,使网页能够根据不同设备的屏幕大小和分辨率进行自适应布局和样式调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值