2.css

一、方式

1、css文件方式

1.文件

html：

   <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <link rel="stylesheet" href="9.css" type="text/css">
    </head>
     <body>
        <div>内容</div>
    </body>

9.css

    div{
        background-color:yellow;
    }

2、行内方式

<div style='background-color:red;'>内容</div>

3、选择器

  <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                background-color:yellow;
            }
        </style>
    </head>
    <body>
        <div>内容</div>
    </body>

二、css常见选择器

1、标签选择器
2、id选择器
3、类别选择器
4、通用选择器
5、包含选择器
6、分组选择器
7、伪类选择器
标签优先级：
行内样式-id选择器-类选择器-标签选择器-通用选择器

三、css属性

css的排版属性

1、边框

border:1px solid red;边框线的宽度，样式，颜色
width：文本框的宽度
height：文本框的高度

2、文本

text-align：文本对齐

center：居中
left：左对齐
right：右对齐

line-height：文本的行高
text-decoration:文本的修饰

uderline:定义文本下的线，
overline:文本上的线，
line-through:穿过文本的线，
blink:定义闪烁的文本
color:文字颜色，配色表：http://webcolor.chrafz.com/
font-size:字号

3、背景

background-color:背景颜色
background-image:url('tupian.png');背景图像
background-position:背景位置,例如15案例

background-position-x:100px;
background-position-y:100px;

css的布局属性：

1、float:浮动

left：控制div向左浮动
right：向右浮动

2、margin：外边距，对外元素的距离，用来控制元素本身的浮动位置

margin 10px 20px 30px 40px：四边距

margin-top：上边距
margin-bottom：下边距
margin-left：左边距
margin-right：右边距

margin：0 auto：上下0，其他自动

2、padding：内边距，是对内元素，用来控制内部元素的位置

padding：四边距
padding-top：上边距
padding-bottom：下边距
padding-left：左边距
padding-right：右边距

3、display：

block：将元素变成块级标签，可以设置高度和宽度
inline：将元素变成行内标签，不能设置高度和宽度
inline-block：同时具有两种
none：标签消失

<span style="background-color: blue;width:500px; height: 20px;display:inline-block;">内容</span>

4、overflow：溢出处理属性

overflow:垂直和水平方向
overfow-x:设置水平方向
overfow-y:设置垂直方向

hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

5、自适应相应

min-width：400px 网页大小最小缩小到400px，就会出现滚动条
max-width：

posted @ 2019-03-13 12:51 杨佳楠丶阅读(183) 评论(0) 编辑收藏举报

杨佳楠丶