css基础

最新推荐文章于 2022-07-19 20:49:05 发布

我的心里只有你

最新推荐文章于 2022-07-19 20:49:05 发布

阅读量467

点赞数 1

分类专栏： javaweb 文章标签： javaweb

本文链接：https://blog.csdn.net/y444400/article/details/72874942

版权

javaweb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

基础

基础语法

<head>
<style type="text/css">
    选择器（即修饰对象）{
    对象的属性1: 属性值1;
    对象的属性2: 属性值2;
  }
</style>
</head>

选择器

元素选择器
<style>
        /*
            CSS的注释：
                直接写元素名{
                    样式名:样式值;
                    样式名:样式值;
                }
        */
        div{
            font-size:50px;
            color:#660000;
        }
  </style>
id选择器
<style>
        /*
            #id值{
                样式名：样式值;
                样式名: 样式值;
            }
        */
        #div2{
            font-size:50px;
            color:#330066;
        }
  </style>
类选择器
<style>
        /*
            类选择器
            .类名{
                样式名:样式值;
                样式名:样式值;
            }
        */
        .one{
            font-size:50px;
            color:#FF0000;
        }
  </style>

css控制字体

div{
            font-size:50px;
            font-family:隶书;
            font-style:italic;
            font-weight:bold;
            color:red;
            text-decoration:line-through;
        }

css控制背景

div{
            width:500px;
            height:300px;
            border:1px solid blue;
            /*设置div背景*/
            /*background:#FFFF00;*/
            background:url(../images/7e971270.gif) no-repeat center top;

        }

css控制列表

li{
            list-style-type:none;
            list-style-image:url("../images/7e971270.gif");

        }

边框，外边距，内边距

        body{
            margin:0px;//外边距
        }
        #div1{
            border:5px solid #FF0000;
            width:300px;
            height:80px;
        }
        #div2{
            border:5px solid #FF0000;
            border-bottom:3px dashed #0033CC; 
            border-top:3px dashed #0033CC; 
            width:300px;
            height:100px;   
            margin:100px 200px 200px 50px;//外边距
            padding-left:50px;//内边距
            padding-top:80px;//内边距
        }

css控制悬浮

值   描述
left    元素向左浮动。
right   元素向右浮动。
none    默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

例：float:left;

clear区隔属性
例：
<style type="text/css">
img
  {
  float:left;
  clear:both;
  }
</style>

clear作用
如果前一个元素存在左浮动或右浮动，则换行以区隔 
只对块级元素有效
clear属性的取值
right
left
both 
none

css控制伪类
CSS 伪类用于向某些选择器添加特殊的效果。

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <style>
        /*超链接未点击*/
        a:link{
            color:#000000;
        }
        /*已经点击完成了*/
        a:visited{
            color:#FF0000;
        }
        /*鼠标放在上面 但是还没点击*/
        a:hover{
            color:#00FF00;
            font:28px;
        }
        /*鼠标点击的时候,但是还没松开.*/
        a:active{
            color:#0000FF;
        }
  </style>
 </HEAD>

 <BODY>
    <a href="#">超链接</a>
 </BODY>
</HTML>

三类应用样式的方式

内部样式表：定义在本文件的style中

外部样式表：

<link rel="stylesheet" href=CSS外部文件名 type="text/css"  />

行内样式：定义在标签内

特殊用途

css参考手册中css定位属性display

常用的值：
none    此元素不会被显示。
block   此元素将显示为块级元素，此元素前后会带有换行符。
inline  默认。此元素会被显示为内联元素，元素前后没有换行符。

例：display:none;该元素隐藏

CSS3 filter(滤镜) 属性：
CSS3 filter(滤镜) 属性

我的心里只有你

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录