CSS

最新推荐文章于 2022-10-08 15:03:04 发布

安卓美女

最新推荐文章于 2022-10-08 15:03:04 发布

阅读量311

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/zxx66/article/details/79849054

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS

CSS的引入

内联样式
内部样式(内嵌样式)
引入外部文件
导入外部样式文件

内联样式

直接对html标签使用style属性,这样与单独设置相似没有优势,一般不用

<p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容</p>

内部样式

将样式进行抽取,把结构和样式进行分离,但是,该样式只对当前的html文件起作用,不能作用在其他的文件.样式资源无法充分利用.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content = "text/html;charset=utf-8"/>
        <title>css</title>
        <meta name="author" content = "zxx">
        <meta name="Description" content = "首次进军h5">
        <meta name="keywords" content = "加油">
        <style type="text/css">
            p{
                color: #ff00ff;
                text-decoration:underline;
                font-weight: bold;
                font-size: 25px;
            }
        </style>
    </head>
    <body>
        <p>标题内容</p>
        <p>引言内容</p>
        <p>正文内容</p>
        <p>结尾内容</p>
    </body>
</html>

引入外部文件

将结构和表现彻底分离,使用频率最高

    <head>
        <link rel="stylesheet" type="text/css" href="1.css">
    </head>
    <body>
        <h2>哈哈哈</h2>
        <p>标题内容</p>
        <p>引言内容</p>
        <p>正文内容</p>
        <p>结尾内容</p>
    </body>

1.css单独存放样式,可以给多个html文件使用,完美!

h2{
                color: #0000ff;
                font-weight: bold;
                font-size: 25px;
}
p{
                color: #ff00ff;
                text-decoration:underline;
                font-weight: bold;
                font-size: 25px;
}

导入外部样式文件

与方式类似,只是语法不同.在之间使用
语法:@import”样式文件”或@import url(“样式文件”)
但是有些浏览器并不支持这种导入方式,所以最好用link的方式进行导入

        <style type="text/css">
            @import url(1.css);
        </style>

四种引入方式的优先级
内连样式>内部引用>import>link

CSS常用属性

CSS字体和文本相关属性
CSS边框和背景相关属性
CSS列表和表格相关属性
CSS常用伪类别相关属性

CSS字体和文本相关属性

font-family 字体系列
font-size 字体尺寸像素或者相对尺寸
font-style 字体样式,normal,italic(斜体),oblique(斜体),不同的浏览器使用不同的斜体设置
font-weight 字体粗细,nomal,bold,自定义粗细.

letter-spacing 字符间距
line-height 文本行高
text-align 设置文本对齐方式
text-decoration 设置文本的装饰效果overline,underline,line-through
text-indent 设置文本首行缩进
text-transform 控制文本大小写,主要uppercase,lowercase,capitalize(英文字母首字母大写)
word-spacing 设置单词间距

p.start{
                text-decoration: line-through;
                text-align: center;
                text-indent: 5px;
                text-transform: capitalize;
                line-height: 10px;
                word-spacing: 20px;
                letter-spacing: 5px;
                font-style: oblique;
                font-weight: normal;
                font-size: 30px;
            }
            .start b{
                font-size: 0.5em;
                font-weight: normal;
            }

CSS边框和背景相关属性

边框
border 设置所有边框的样式
border:5px double #FF00FF;

border-style 边框样式,
border-color 边框颜色
border-width 边框的宽度

border-left-style 左边框样式,
border-left-color 左边框颜色
border-left-width 左边框的宽度

背景
background 背景所有属性
background:url(bg5.JPG) no-repeat 200px 25px;\

background-attachment 背景图片是否随着网页的其余部分滚动scroll(一起滚动),fixed(固定);
background-repeat 是否重复平铺
background-position 在页面的位置

<style>
    #content{
                width: 200px;
                height: 300px;
                border-width: 2px;
                border-style: dashed;
                border-color: red;
                border-left: 5px double blue;
            }
            body{
                /* background: url(banner.jpg);
                background-position: 200px 150px;
                background-repeat: no-repeat;
                background-attachment: scroll; */
                background: url(banner.jpg) 200px 150px no-repeat scroll;
            }
</style>

CSS列表和表格相关属性

列表
list-style 设置所有的列表属性
list-style-image 将图像设置为列表项标记,url值
list-style-position 设置列表项标记放置的位置,outside和inside
list-style-type 设置列表标记的类型,不可以与list-style-image同时出现.

#hobby{
                background-color: #aaa;
                list-style: url(image.png) inside;
            }
    ----------------------------
    <ul id="hobby">
            <li>篮球</li>
            <li>足球</li>
            <li>羽毛球</li>
        </ul>

表格
border-collapse 设置是否把表格边框合并为单一的边框
border-spacing 设置分割边个边框的距离,不能喝border-collapse同时出现
caption-side 设置表格标题的位置,顶部或者底部
empty-cells 设置是否显示表格中的空单元格

            #tb{
                height: 100px;
                width: 50%;
                border-spacing: 20px;
                font-family: "宋体";
                caption-side: bottom;
                empty-cells: hide;
                border: red 1px solid;
            }
            #tb td {
                border: red 1px solid;
            }
            ------------------------------
            <table id="tb">
            <caption>我的表格</caption>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td></td>
            </tr>
        </table>

CSS定位与DIV布局

盒子模型
元素定位

盒子模型

盒子的宽度或高度为content+padding+border+margin
border : color,width,style
padding

两个块级元素之间的距离是两者中的较大者的margin值
当块之间是父子关系,通过设置子块的margin为负数,可以是子块从父块中”分离”出来

元素定位

float–浮动left,right,none.当一个块级元素变成float,就会相当于一个行级元素,不再占据一行.
float:left;
如果不想被其他的浮动元素影响,可以设置块级元素的clear属性.
clear:left;
position定位:当将子块的position设置为absolute时,子块已经不再从属于父块,器左边框设置的距离是相对于页面body的距离,而不是父块的距离.
当将子块的position设置为relative是,与absolute完全不同,这是子块是相对于自身在父块原来的位置进行定位的.

float和position的区别:
设置成position时,兄弟块不再围绕这脱离父类的那个元素,而是当它不存在
z-index:调整定位时重叠块的上下位置,当块设置了position属性是,该值可设置个快之间的重叠高低关系.值大的往上放.

安卓美女

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS

CSSCSS的引入内联样式内部样式(内嵌样式)引入外部文件导入外部样式文件内联样式直接对html标签使用style属性,这样与单独设置相似没有优势,一般不用&lt;p style="color:#FF0000; font-size:20px; text-decoration:underline;"&gt;正文内容&lt;/p&gt;内部样式将样式进行抽取,...
复制链接

扫一扫