css（日后补上）

最新推荐文章于 2022-11-08 20:52:09 发布

asdwasc

最新推荐文章于 2022-11-08 20:52:09 发布

阅读量72

点赞数

本文链接：https://blog.csdn.net/asdwasc/article/details/116241746

版权

CSS 选择器盒子模型美化网页布局

关键词由CSDN通过智能技术生成

在这里插入图片描述
margin 外边距 border边框 padding内边距
div 空的块标签 span 空的行内标签

css入门

是什么
怎么用
css选择器（重点）
美化网页
盒子
浮动
定位
动画

什么是css

Cascading Style Sheet 层叠级联样式表

主要是美化网页

字体颜色边框等等，

css发展史

css2.0 div+css ，html与css分离

css2.1 浮动和定位

css3.0 圆角，阴影，动画，除了动画，所有浏览器都支持

快速入门

在head 中写style标签
直接写到css中

基本语法

选择器{
```
 	声明；
```
声明；

声明；
```
 	}
```
html连接到css

在head里写一个link标签，新建css文件，css文件里面包含了选择器，href写相对路径

<link rel="stylesheet" href="../第一个css程序/css/style.css">

CSS的三种导入方式

内部样式，写在head的style标签块里面
外部样式，写在外部css文件中,通过link标签链接
行内样式，写在html代码中

优先级就近原则,一般来说行内>内部>外部

但是如果link写在style下面,则外部>内部,所以不推荐用内部样式写css

行内样式建议用来比较大的项目修改一小部分

css的注释为/**/ 和html注释不同

导入式 @import+url是css2.1特有的

三种基本选择器

标签选择器

<style>
    h1{
        color: #6abf3c;
    }
</style>

所有的h1标签都会改变

类选择器class

 .yiji{
            color: aquamarine;
        }
    </style>
</head>
<body>
<h1 class="yiji">一个一级标题</h1>
<h1  class="yj">一个标题</h1>

.加class名称,好处可以用相同的class实现css的复用

id选择器

  <style>
        
        #h1title{
            color: blue;
        }
    </style>
</head>
<body>
<h1 class="yiji" id=h1title>一个一级标题</h1>

class和id能同时存在

选择器语法 #id名称{

}

id必须保证全局唯一

选择器优先级

ID选择器>class选择器>标签选择器

层次选择器

<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        /* 后代选择器  标签 空格 标签{}  选中所有空格后标签类型的标签   */
        body p{
            color: blue;
        }
    /*  子选择器，选择后一代的类型  */
        body>p{
            color: aqua;
        }
        /*    相邻兄弟选择器，向下选择一位同一代的,不包括自己*/
        .active+p{
            color: blueviolet;
        }
    /*    兄弟选择器，向下选择同一代的,不包括自己*/
        .active~p{
            color: brown;
        }
    </style>
</head>
<body>
<p class="active">p0</p>
<p>p1</p>
<p>p2</p>
<ul>
    <li> <p>p3</p></li>
    <li> <p>p4</p></li>
    <li> <p>p5</p></li>
    <li> <p>p6</p></li>
</ul>
</body>

结构伪类选择器

伪类带冒号:

a标签

a:hover {};鼠标移到时状态重点,只需要记住这个

a:active{};鼠标点击时的状态

a:visited{};点过之后,一般用默认颜色

其他

<style>
    /* 第一个子元素*/
    ul li:first-child{
        color: brown;
    }
最后一个子元素
    ul li:last-child{
        color: #670c8e;
    }
这个ul所有li元素
 ul li{
        color: #670c8e;
    }
</style>

p:nth-child(1) 选择父类的第几个子元素,如果第一个子元素是p标签才会生效

p:nth-of-type(1) 按照类型选择父元素的第几个符合条件的元素

属性选择器

标签[ 属性 = 属性名或者正则表达式]{

}

改herf属性以http开头的a标签

a[herf ^= http]{

}

=号绝对等于 *= 包含 ^= 以什么开头 $= 以什么结尾

a[]{

}

美化部分

字体样式

span标签,约定重要的标签,自己设置属性

font-family 字体样式

font-size 字体大小 px单位 em缩进

font-weight 字体粗细

color 字体颜色

文本样式

1.颜色 color: ; rgba(红,绿,蓝,透明度);

2.居中 text-aline:center;

3.首行缩进 text-indent :2em;

background文本背景颜色
line-height:设置行高,行高设置为块高度时,效果为居中
text-decoration none;取消下划线
text-shadow 文字阴影

列表设计

list-style :none; 去掉圆点,去掉数字

背景

背景图片

默认平铺

background-repeat;

背景颜色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SbJYDgfM-1619612300613)(…/…/AppData/Roaming/Typora/typora-user-images/image-20210428193609132.png)]

盒子模型

margin 外边距 border边框 padding内边距

外边距的用处,居中盒子的元素 margin :0 auto;

border 1px soilder black 宽度实线黑色

盒子大小计算方式,margin + border +padding+内容

display 和浮动

div 空的块标签 span 空的行内标签

display:inline-block;修改行或块特性,两个都用表示都有

display:none; 设置成没有

asdwasc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css（日后补上）

margin 外边距 border边框 padding内边距div 空的块标签 span 空的行内标签css入门是什么怎么用css选择器（重点）美化网页盒子浮动定位动画什么是cssCascading Style Sheet 层叠级联样式表主要是美化网页字体颜色边框等等，css发展史css2.0 div+css ，html与css分离css2.1 浮动和定位css3.0 圆角，阴影，动画，除了动画，所有浏览器都支持快速入门在head 中写st.
复制链接

扫一扫