CSS

全称Casading Style Sheets,层叠样式表,控制HTML标签的样式,在美化网页中起到非常重要的作用。

CSS编写格式是键值形式的,比如

color: red;

冒号:左边的是属性名,冒号:右边的是属性值.

①CSS中书写形式

1.行内样式(内联样式) 直接在标签的style属性中书写

<body style= “color:red;”>

案例:

     <div style="color: blue; font-size: 28px; background-color: aliceblue">
         <p style="color: red; border: 5px solid paleturquoise">我是段落</p>
     </div>

2.页内样式:在本网页的style标签中书写

<style>
      body {
               color: red;
      }
</style>

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS页内样式</title>
    <style>
        div {
            color: red;
            font-size: 28px;
            border: 4px solid yellow;
        }
        p {
            color: blue;
            font-size: 28px;
        }
    </style>
</head>
<body>
     <div>我是容器标签</div>
     <p>我是段落标签</p>
</body>
</html>

3.外部样式:在单独的CSS文件中书写,然后在网页中用link标签引入

<!--引入外部样式-->
<link rel="stylesheet" href="./css/index.css">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS外部样式</title>
    <!--引入外部样式-->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div>我是容器</div>
    <p>我是段落</p>
</body>
</html>

CSS定义样式表

1>直接使用html标签定义选择器

     <style>
        div {
            color: red;
            font-size: 28px;
            border: 4px solid yellow;
        }
        p {
            color: blue;
            font-size: 28px;
        }
    </style>

2>class定义:类名选择器,定义是以"."开始,.p{color: red},子类选择器 .baby text{color: blue;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        .container {
            color: red;
            font-size: 28px;
            border: 4px solid yellow;
        }
    </style>
</head>
<body>
     <div class="container">我是容器标签</div>
</body>
</html>

3>id定义:id选择器,定义是以"#"开始的,且只能出现一次。#p{color: blue;}

4>选择器优先级问题

(1)ID>Class>HTML ;

(2).同级时选择离元素最近的一个执行#p{color:red} #p{colod:#f60}执行颜色为#f60的.

(3). z-index 提高优先级

5>组合(并列)选择器:同时控制多个元素,多个元素之间用","隔开。

<!--组合选择器-->
h1,h2,h3,.bb {
     font-size: 20px;
     color: red;
}

6>复合选择器

7>后代选择器(一个标签包含另一个标签)

8>直接后代选择器

9>相邻兄弟选择器

10>属性选择器

11>伪元素选择器(伪类)

(1)a:link 未访问(正常)连接的样式

(2) a:hover 鼠标放上去元素的样式

(3) a:active 选择链接时的样式

(4)a:visited 已经访问过的链接的样式

(5) :focus向拥有键盘输入焦点的元素添加样式

(6) :first-child 向元素的第一个子元素添加样式

(7) :lang 向带有指定lang属性的元素添加样式

(8) :first-letter向文本的第一个字母添加特殊样式

(9) :first-line 向文本的首行添加特殊样式

(10) :before 在元素之前添加内容

(11) :after 在元素之后添加内容

<style type="text/css">
   a:link {
     color: red;
   }
   a:hover {
      color: green;
   }
   a:active {
      color: yellow;
   }
   a:visited {
       color: lightgray;
   }
</style>

选择器权重(数值越大,优先级越高,如果权值相同,后定义的优先级最高)

通配符:(*) 0

标签 1

类 10

属性 10

伪类 10

伪元素 10

id 100

important 1000

important使用

CSS规律

相同类型的选择器遵循

1.就近原则:如果对同一个标签设置了不同的样式,该标签会找最近的样式

2.叠加原则:同时导入页内样式和外部样式,页内样式不设置字体大小和颜色,该标签会使用外部样式。

3.范围越小,优先级越高

不同类型的选择器

③CSS常见属性

CSS属性:根据继承性,主要分为两大类

可继承属性

父标签的属性值会传递给子标签

一般是文字控制属性

不可继承属性

父标签的属性值不能传递给子标签

一般是区块控制属性

所有标签可继承

visibility、cursor

内联标签可继承

letter-spacing、word-spacing、white-space、line-heightcolorfontfont-familyfont-size、font-style、font-variant、font-weighttext-decoration、text-transform、direction

块级标签可继承

text-indent、text-align

列表标签可继承

list-style、list-style-type、list-style-position、list-style-image

不可继承属性

displaymargin、border、padding、background

height、min-height、max-height、width、min-width、max-width

overflow、position、left、right、top、bottom、z-index

float、clear

table-layout、vertical-align

page-break-after、page-bread-before

unicode-bidi

1.颜色属性

<!--color属性定义文本的颜色-->
<!--1.英文单词color:green; -->
<!--2.十六进制颜色值:color:#ff6600 简写式#f60-->
<!--3. RGB颜色-->
<!--红绿蓝RGB颜色,每个取值0~255:color:rgb(255,255,255)-->
<!--RGBA 颜色,带透明度:color : rgba (255,255,255,1)-->
<!--
红色:color: rgb(255,0,0)
-->
<!--绿色:color: rgb(0,255,0)
-->
<!--蓝色:color: rgb(0,0,255)
-->
<!--白色:color: rgb(255,255,255)-->
<!--
黑色:color: rgb(0,0,0)
-->

2.字体属性

1.font-size 字体大小

px:设置一个固定的值;%父元素的百分比;smaller 比父元素更小;larger 比父元素更大;inherit [ɪnˈherɪt] :继承父元素的

比如body设置字体20px ,那么子元素h1设置100% 是按照body 的百分比.

2.font-family 定义字体:font-family : 微软雅黑,serif;可以使用”,”隔开,可以确保当字体不存在的时候直接使用下一个

3.font-weight 字体加粗 normal :默认值 bold 粗 、bolder 更粗 、lighter、更细;normal = 400,bold = 700,100,200,300~900

4.font-style 字体样式 : normal:正常,标准 italic[ɪˈtælɪk]:斜体; oblique[əˈbli:k] 倾斜; inherit:继承 <em>默认会增加一个斜体

5.font-variant[ˈveəriənt] 变体 小型大写字母显示文字 :normal :标准; inherit:继承;small-caps :小型大写字母显示文字 小写变大写

3.背景属性

1.背景颜色:background-color

2.背景图片:background-image

3.背景展示方式background-repeat : repeat :重复平铺满 repeat-x : 向x轴重复 repeat-y : 向y轴重复 no-repeat : 不重复

4.背景位置:background-position : 横向:(left,center,right) 纵向(top , center , bottom) ;还可以用数值来表示位置

简写方式:background: 背景颜色 url(图像) 重复 位置 ; background: #60 url(img/bg.jpg) no-repeat top center.

4.文本属性

1.text-align 横向排列 left ,center ,right

2.line-height 文本行高 : ①%基于字体大小的百分比行高②数值 来设置固定值

3.text-ident 首行缩进 % 父元素的百分比;px固定值,默认0; inherit 继承

4.letter-spacing : 字符间距 normal 默认; length 具体数值;inherit 继承

5.word-spacing : 单词间距 normal 默认; px 具体数值;inherit 继承

6.direction :文本方向 : ltr 从左到右,默认值; rtl 从右到左 ; inherit 继承

7.text-transform : 文本大小写 : none 默认 capitalize :每个单词以大写字母开头;uppercase 定义仅有大写字母 ; lowercase 定义仅有小写字母 inherit 继承父元素的text-transform .

5.边框属性

简写:border : solid 2px #f60;

1.边框风格:border-style

单独定义某一方向的边框样式。

border-bottom-style 下边边框样式

border-top-style 上边边框样式

border-left-style 左边边框样式

border-right-style 右边边框样式

边框风格样式的属性值:

① none 无边框 ②solid 直线边框 ③dashed 虚线边框④dotted 点状边框 ⑤double 双线边框 ⑥groove 凸槽边框⑦ridge 垄状边框 ⑧inset inset 边框 ⑨outset outset 边框 10.inherit 继承

2.边框宽度:

border-width 属性值: ①thin 细边框 ②medium 中等边框 ③thick 粗边框④px固定值⑤inherit继承

3.边框颜色:border-color 属性值的四种情况:

一个值:border : (上、下、左、右);

两个值:border : (上下) (左右); border-color: green red;上下为绿,左右为红

三个值:border : (上) (左、右) (下); border-color: green red yellow; 上边为绿色;下边为黄色;左右为红色

四个值:border : (上) (右) (下) (左);border-color: green red yellow darkcyan;上边为绿色;右边为红色;下边为黄色;左为青色

简写:border : solid 2px #f60;

6.列表属性

1.list-style-type 标记的类型

none :无标记;

disc默认,标记是实心圆;

circle 标记是空心圆 ;

square 标记是实心方块;

decimal 标记是数字[ˈdesɪml];

其他

decimal-leading-zero    0开头的数字标记。(01, 02, 03, 等。)
lower-roman      小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman    大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha     小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha     大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek     小写希腊字母(alpha, beta, gamma, 等。)
lower-latin    小写拉丁字母(a, b, c, d, e, 等。)
upper-latin    大写拉丁字母(A, B, C, D, E, 等。)

2.list-style-position 标记的位置 :

inside列表项目标记放置在文本以内,且环绕文本根据标记对齐。

outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。

inherit规定应该从父元素继承 list-style-position 属性的值。

3.list-style-image 设置图像列表标记 : URL 图像的路径;none 默认,无图形被显示 ; inherit 继承

4.list-style :简写方式 list-style : square inside url(‘i/arrow.jpg’);

7.文本框属性

input 设置光标出现时的边框样式

box-sizing: border-box;

其他

去掉a标签的线

text-decoration:none;

内外边距

*{/*通配符选择器*/

margin: 0 ;/*清除默认外边距*/

padding: 0;/*清除默认内边距*/

}

border-radius:0px; /*设置圆角*/

box-shadow: 0 0 7px red; /*设置阴影 水平位移 垂直位移 扩散程度 阴影颜色 第一个值正值往右;第二个值正值往下*/

button设置:

border: 0; /*去除Button的默认边框*/

outline:0; /*清除按钮点击时的默认选中边框*/

cursor: pointer;/*设置鼠标🖱放上去的时候,改变图标指示类型 小手指*/

//设置块阴影和文字阴影

<style>
  div{
           width: 200px;
           height: 80px;
           margin: 30px;
           background-color: rgba(255,0,0,1.0);
            /*块阴影*/
           box-shadow: 10px 10px  10px purple;
            border-top-left-radius: 100px;
            border-bottom-right-radius: 100px;
       }
  .test6{
            color: red;
            font-size: 200px;
            /*文字阴影*/
            text-shadow: 10px 10px 9px purple;
           }
</style>

优质内容筛选与推荐>>
1、KMP算法求解
2、QQ:61800789,又一是个傻B,想用激将法的自称不是太监的太监
3、从伯努利分布到交叉熵(一)
4、工具sublime安装
5、谈一谈软件BUG造成的严重危害


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn