css引入

最新推荐文章于 2023-05-06 18:53:01 发布

csde.L

最新推荐文章于 2023-05-06 18:53:01 发布

阅读量914

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/RzhenDwo/article/details/127823774

版权

最近使用eclipse写前端，反正都是编译软件，用哪个不是用

css的三种引入方式：1、行内式引入，使用style属性在特定的HTML标记内插入CSS代码，语法“<标签名 style="css样式">..</标签名>”；2、嵌入式引入，在文档head部分的style标签对中放入CSS代码，语法“<style>样式</style>”；3、外部引入，将CSS代码放入外部CSS文件中，使用link标签或“@import”规则引入html文档中。

一、css的属性

属性：属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性
属性值：属性值包括法定属性值及常见的数值加单位，如25px，或颜色值等。

二、css的行块属性
属性：div,p,ul,ol,li,h1-h6等 
特点：1.可以设置宽高
2.不可以与别人共处一行
3.不设置宽度的情况下，宽度为100%
行内属性：span，a
特点：1.不可以设置宽，高
2.可以与别人共处一行
3.其宽高由内容撑开
行块内属性：img，input
特点：1.可以设置宽高
2.可以与别人共处一行

三、边框属性

border:边框宽度 边框风格 边框颜色;
    例如：border:5px solid #ff0000


边框：border,网页中很多修饰性线条都是由边框来实现的。
边框宽度：border-width:
边框颜色：border-color:
边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框，


可单独设置一方向边框，
    border-bottom:边框宽度 边框风格 边框颜色;底边框
    border-left:边框宽度 边框风格 边框颜色;左边框
    border-right:边框宽度 边框风格 边框颜色;右边框
    border-top:边框宽度 边框风格 边框颜色;上边框

四、css属性继承

不可继承的：display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform。
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        div{width: 800px;height: 800px;
            background-color: rgb(0,, 0, 0);
            background-image: url(http://wx1.sinaimg.cn/bmiddle/c3335c0ely1grk8lon9fmg20d404kdhj.gif);
        background-repeat: no-repeat/*取消图像的重复平铺。-y-no-repeat：竖着不平铺。-x：横着不平铺 */;
        background-size: 100% 100%;
        display: inline-block;
        }
        span{
            width: 300px;height: 30px;
        }
    </style>
</head>
<body>
<div>我是div</div>

<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
<input type="" name=""><!--默认text-->
<input type="" name="">
块属性：div,p,ul,ol,li,h1-h6等 
特点：1.可以设置宽高
2.不可以与别人共处一行
3.不设置宽度的情况下，宽度为100%
行内属性：span，a
特点：1.不可以设置宽，高
2.可以与别人共处一行
3.其宽高由内容撑开
行块内属性：img，input
特点：1.可以设置宽高
2.可以与别人共处一行
</body>