css笔记

最新推荐文章于 2024-05-31 01:27:40 发布

cxsbei

最新推荐文章于 2024-05-31 01:27:40 发布

阅读量100

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/cs2846842279/article/details/121388609

版权

1.css

css（cascading style sheet）叠层样式表单。是用来表示HTML或XML等文件样式的计算机语言。css可以静态地修饰文本，还可以配合各种脚本语言动态地对网页元素进行格式化。

2.引入方式

引入方式分为四种。

行内样式：

又称标签样式，在标签上加上style属性。

内嵌样式：

样式写在style标签内。

外链样式：

从外部引入css文件，在css文件内进行编辑。

导入式

@import(url(demo.css))

1.页面会先加载html，然后再去加载css，这样就会造成页面样式的延迟。

2.创建一个demo.css文件，写上一个css样式

//写在demo.css文件中
h2{
    color:green;
}

3.使用@import方式导入demo.css文件

<style>
  @import url(demo.css)
</style>
----------------------------------------------------------------------------
//写在body标签中
<h2>导入式</h2>

3.选择器

基本选择器：

1.标签选择器

<style type="text/css">
    h2{
       color: red;
      }
</style>

2.id选择器

<style type="text/css">
    #a{
       color: red;
      }
</style>

3.类选择器

<style type="text/css">
    .b{
       color: red;
      }
</style>

4.通配符选择器

<style type="text/css">
    *{
       color: red;
      }
</style>

基本选择器的优先级：id>类>标签>通配符

包含选择器：

1.子代选择器：获取某个标签的第一级子标签

2.后代选择器：获取某个标签内的所有子标签

3.分组选择器：又称逗号选择器，可以让多个标签加上样式，通过逗号隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div.list>ul{
            color: #000fff
        } */
        /* .list li{
            color:brown
        } */
        /* h2,ul,p{
            color: #999
        } */
        p[id]{
            background:pink
        }
        input[type="password"]{
            background:brown
        }
        p[class*="e"]{
            background-color: cadetblue;
        }
        input[type^="t"]{          background: green;       }
    </style>
</head>
<body>
    <h2>jjh</h2>
    <div class="list">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    </div>
    <p>hhh</p>
    <div title="one">kjshjkhk</div>
    <p class="two">jhjhjkh</p>
    <p class="edg">edgnb</p>
    <input type="text" id="a" value="1">
    <input type="password" id="b" value="2">
    <div class="msg">klhhl</div>
    <p id="jkk">lljljl</p>
</body>
</html>

属性选择器：

div[title]：选中某个标签的某个属性

input[type="text"]：确切的等于目标标签的属性

input[type*="e"]：某个属性包含某个值

input[type^="e"]：某个属性以e值开始

input[type$="e"]：选择以e结束的属性

#a + ：表示选择id=a的下一个标签

[title="属性的值"]：选择确切的属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div.list>ul{
            color: #000fff
        } */
        /* .list li{
            color:brown
        } */
        /* h2,ul,p{
            color: #999
        } */
        p[id]{
            background:pink
        }
        input[type="password"]{
            background:brown
        }
        p[class*="e"]{
            background-color: cadetblue;
        }
        input[type^="t"]{          background: green;       }
    </style>
</head>
<body>
    <h2>jjh</h2>
    <div class="list">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    </div>
    <p>hhh</p>
    <div title="one">kjshjkhk</div>
    <p class="two">jhjhjkh</p>
    <p class="edg">edgnb</p>
    <input type="text" id="a" value="1">
    <input type="password" id="b" value="2">
    <div class="msg">klhhl</div>
    <p id="jkk">lljljl</p>
</body>
</html>

伪类选择器：

:link	超链接点击前的样式
:visited	链接访问后的样式
:hover	鼠标悬停链接上时的样式
:active	被激活时的链接样式
:focus	某个标签获得焦点时样式

超链接四种状态顺序一定，:limk,:xisited,:hover,:active

伪元素选择器：

:after :before css2提供

::after :before css3提供

使用before和after时需要加上conter（内容）属性

4.css样式

控制字体：

font-size	设置字号	px
color	设置颜色
font-family	设置字体	"字体"
line-height	设置行高	em
font-weight	设置字体的粗细	normal(正常，默认) bold(粗体)

特点：

1.继承性

2.叠层性

控制文本：

text-indent	设置文本的缩进
text-align	控制文本对齐方式	left center tight
white-space	对文本中空白的处理	space pre nowrap
text-transform	文本大小写的控制	none（原文本) capitalize（首字母大写） uppercase（大写） lowercase（小写）
vertical-align	属性设置元素的垂直对齐方式

vertical-align的取值
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

cxsbei

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css笔记

1.csscss（cascading style sheet）叠层样式表单。是用来表示HTML或XML等文件样式的计算机语言。css可以静态地修饰文本，还可以配合各种脚本语言动态地对网页元素进行格式化。2.引入方式引入方式分为四种。行内样式：又称标签样式，在标签上加上style属性。内嵌样式：样式写在style标签内。外链样式：从外部引入css文件，在css文件内进行编辑。导入式@import(url(demo.css))1.页面会先加载html，然后再去加载
复制链接

扫一扫