css基础笔记

CSS层叠样式表：负责对网页的美化

三种使用方式：

1、元素内嵌样式表：页面标签中添加。在HTML标签style属性，所有HTML标签都支持，并且优先级最高

2、文档内嵌样式表（内部样式表）：页面head标签中添加style标签，标签里专门写CSS代码。

3、通过head标签中添加link标签来引入外部CSS文件。

具体使用：就近原则

1、网站首页一般使用文档内嵌样式表；

2、其余页面使用外部样式表；

3、元素内嵌样式表，一般不使用。

选择器：

1、标签选择器：html文档中的标签都会具有选择中的样式；

2、id选择器：给id赋予的值用#来添加样式；

3、类选择器：class

4、组合选择器：

   <style>
        h1{
            color: aqua;width: 10;
        }
        li{
            color: chartreuse;
        }
        ol li{
            color: red;
        }
        #a li{
            color: #8A2BE2;
        }
    </style>
</head>
<link rel="stylesheet" type="text/css" href="./css/CSS1.css"/>
<body>
    <h4> <!-- style="color: aliceblue;"> -->看这江水美如画</h1>
    <h3>本想吟诗赠天下</h2>
    <h2>奈何自己没文化</h3>
    <h1>只能卧槽，浪好大！！！</h4>
    <ol>
        <li>山好</li>
        <li>水好</li>
    </ol>
    <ul id="a">
        <li>人好</li>
        <li>国好</li>
    </ul>
</body>

5、伪类选择器：对鼠标发生指定动作时设置的样式；

a:link 打开页面时超链接默认的样式 a:hover 当鼠标悬停到超链接上时设置的样式 a:visited 当超链接被点击后设置的样式 a:active 当鼠标点击超链接不释放时设置的样式其中:hover 不仅仅可以作用于超链接，:hover 支持大多数HTML标签。在同时运用多种伪类选择器时，确保a:link 写在前面以保证能够伪类选择器有效果

target_blank：让链接在新页面跳转；

伪类选择器部分代码：

<style type="text/css">
            a:link{
                            color: red;
                        }
                        a:hover{
                            color: #008000;
                        }
                        a:visited{
                            color: gray;
                            }
                        a:active{
                            color: aquamarine;
                        }
</style>
</head>
<body>
    <a href="HTTP://www.baidu.com">百度一下</a>
</body>

常用文本CSS属性：

color：red; 设置文本颜色 text-align:center 设置文本对齐方向替代html属性中的align font-size: 14px; 设置文本大小，以px（像素）为单位 font-weight:bold或者数字设置文本粗细 font-family：'微软雅黑' ; 设置文本字体类型 font-style：italic; 设置字体的风格。比如倾斜、斜体

常用文本css部分代码:
<style type="text/css">
            p{
                color: #FF0000;
                text-align: center;
                font-size: 50px;
                font-weight: bold;
                font-family:  "宋体";
                font-style: italic;
            }
        </style>
</head>
<body>
    <p>新浪网新闻中心是新浪网最重要的频道之一,24小时滚动报道国内、国际及社会新闻。</p>
</body>

容器类CSS属性：

width：300px; 宽度 height：300px; 高度 border：1px solid red 边框，包括大小，颜色和边框样式背景颜色 background-image: url(“图片地址”); 背景图像 line-height: 20px;行高 text-decoration:none; 超链接的下划线的样式 margin： 0 auto; 设置HTML元素和其他周围HTML元素之间的距离

盒模型：盒模型是CSS中一个重要的概念，理解盒模型才能更好的排版。

新建盒子快捷键：div.box1+tab

内容区：content。大小使用width，height来设置

内边距：padding。会使用内容区的背景颜色。

边框：border。设置时，边框的宽、样式、颜色缺一不可。

border-width：10px；20px；30px；40px。设置的顺序为上、右、下、左。

border-width：10px；20px；30px；显示边框为上、右、下、右。

border-width：10px；20px；显示的边框为：上、右、上、右。

外边距：margin

posted @ 2020-06-02 17:11 时倾lzl 阅读(142) 评论(0) 收藏举报

刷新页面返回顶部

时倾lzl

css基础笔记

公告