CSS

CSS的四种引入方式:

一、行内样式

<div style="background-color: blue;color: brown">cairui</div>

二、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: blue;
            color: darkgoldenrod;
        }
    </style>
</head>
<body>
     <p>cai</p>
    <div>rui</div>
</body>
</html>

三、写一个css文件,把内容放在里面引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "1.css";
    </style>
</head>
<body>
     <p>cai</p>
    <div>rui</div>
</body>
</html>

四:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
     <p>cai</p>
    <div>rui</div>
</body>
</html>

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #www{
            background-color: chartreuse;
            color: brown;
        }
    </style>
</head>
<body>
     <p id="www">cai</p>
    <div>rui</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .www{
            background-color: chartreuse;
            color: brown;
        }
    </style>
</head>
<body>
     <p class="www">cai</p>
    <div>rui</div>
</body>
</html>

id是唯一的(类似身份证),class是可重复的

组合选择器:

E,F  多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p,div{
            background-color: chartreuse;
            color: brown;
        }
    </style>
</head>
<body>
     <p class="www">cai</p>
    <div>rui</div>
</body>
</html>

E F  后代元素选择器,匹配所有属于E后代的F元素,E和F之间用空格分隔

E>F  子元素选择器,匹配所有E元素的子元素F

E+F  毗邻元素选择器,匹配所有紧随E元素之后的同级元素F

伪类选择器:

专用于控制链的显示效果,伪类选择器:

  a:link(没有接触过的链接),用于定义链接的常规状态

  a:hover(鼠标放在链接上的状态),用于产生视觉效果

  a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接

  a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态

伪类选择器:伪类指的是标签的不同状态:

  a ==>点过的状态 没有点过的状态 鼠标悬浮状态 激活状态

    a:link{color:#FF0000}/*未访问的链接*/

    a:visited{color:#00FF00}/*已访问的链接*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: red;
        }
        a:hover{
            color: chartreuse;
        }
        a:visited{
            color: darkgray;
        }
        a:active{
            color: yellow;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">点击</a>
</body>
</html>

CSS的属性:

1、颜色属性

<div style="color: red">cairui</div>

<div style="color: #00bFFF">cairui</div>

2、字体属性

font-size: 50px;

font-family: 宋体;

font-weight: 100;    #加粗

3、背景属性

background-color: red;

background-image: url("task.PNG");    #背景图片

background-repeat: no-repeat;    #背景图片不重复

background-position: right top;    #背景图片所在的位置

4、文本属性

font-size: 10px;

text-align: center;横向排列

line-height: 200px;文本行高,通俗讲,文字高度加上文字上下的空白区域的高度50%;基于字体大小的百分比

text-indent: 150px;首行缩进,50%;基于父类(weight)的百分比

letter-spacing: 10px;

5、边框属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            width: 50px;
            background-color: red;
            border-style: solid;    #边框为实线边框
            border-color: blue;     #边框颜色
            border-width: 20px;     #边框高宽

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

6、列表属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            list-style: decimal-leading-zero;   #01,02,03开头
            list-style: none;   #去掉开头的样式
            
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

7、dispaly属性

  • none
  • block
  • inline

改变一个文本是块级标签还是内联标签。还有none是使其消失。

8、盒子模型

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: darkgray;
            width: 300px;
            border:25px solid green;    #边框
            padding: 25px;      #内边距
            margin: 25px;       #外边距

        }

    </style>
</head>
<body>
    <div>内容</div>
</body>
</html>

CSS Float(浮动)

CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

Float(浮动),往往是用于图像,但它在布局时一样非常有用。

元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动,下面的文本流将环绕在它左边:

如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。

在这里,我们对图片廊使用 float 属性:

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊:

CSS Position(定位)

position 属性指定了元素的定位类型。

position 属性的四个值:

  • static
  • relative
  • fixed
  • absolute

元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。

static 定位

HTML元素的默认值,即没有定位,元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动:

relative 定位

相对定位元素的定位是相对其正常位置

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

http://www.runoob.com/css/css-positioning.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

元素居中的多种实现方式!

优点:只需在子元素child上设置css样式,不用关心父元素的 缺点:兼容性较差,如果需要兼容,更改html样式,改为table样式

6820
来自专栏性能与架构

CSS选择器是如何确定优先级的?

先看下面的示例 <div id="content"> <p id="title">Hello world</p> </div> 有如下的2个css选择器...

310100
来自专栏Python

css样式—字体垂直、水平居中

<div class="tt">啦啦啦</div> .tt{ padding: 0px; width:500px...

249100
来自专栏杂七杂八

css布局使用

目录 常用居中 垂直居中 水平居中 垂直水平居中 单列布局 双列&三列布局 ---- 常用居中 垂直居中 单行文本垂直居中 <div class="pare...

32190
来自专栏杨龙飞前端

dispaly属性,position属性

34950
来自专栏前端知识分享

第3天:CSS浮动、定位、表格、表单总结

今天学的是浮动、定位、表格、表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意。下面是主要知识点:

16140
来自专栏进击的君君的前端之路

CSS常见样式(一)

31130
来自专栏菜鸟计划

CSS布局(二) 盒子模型属性

盒子模型的属性 宽高width/height   在CSS中,可以对任何块级元素设置显式高度。   如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效...

50870
来自专栏前端杂货铺

垂直属性

元素的盒模型有几个较为重要的属性,本篇文章主要将脚垫聚集在与height相关的属性上。 对于一个并未显式设置高度块框来说,其height的高度不仅仅取决去内容的...

37170
来自专栏coding for love

CSS入门10-替换元素和非替换元素,块级元素和行内元素

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

9000

扫码关注云+社区

领取腾讯云代金券