CSS

CSS

什么是CSS

CSS全称Cascading Style Sheet层叠样式表

用来调整美化网页(对不同的模块去调整宽度高度背景字体大小等)

HTML用来填入基本网页整体内容和结构划分,而CSS则用来美化调整各个部分

基础语法

可以声明在html的style中,也可以外部导入

选择器

什么是选择器:指定出想要要调整的标签

id选择器:定位到指定id的标签(#+id选择)id不能重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二的标签</title>
    <style>                 
        #a{                <!--id为a的标签被修饰 -->
            width: 100px;  
            height: 100px;
            background: red;
        }
</style>
</head>
<body>
    <div id="a">

    </div>   
</body>
</html>

类选择器:找到所有此类的标签(.+class)class名可以重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二的标签</title>
    <style>                 
        .a{                <!--class为a的标签都被修饰 -->
            width: 100px;  
            height: 100px;
            background: red;
        }
</style>
</head>
<body>
    <div class="a"></div>  
    <div class="a"></div>  
     <p class="a"></p>
</body>
</html>

标签选择器:选择所有此标签(标签名)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二的标签</title>
    <style>                 
        div{                <!--所有的div标签都被修饰 -->
            width: 100px;  
            height: 100px;
            background: red;
        }
</style>
</head>
<body>
    <div class="a"></div>  
    <div class="a"></div>  
     <p class="a"></p>     <!--不是div标签所以未被修饰 -->
</body>
</html>

属性选择器:选出所有带有此属性的标签([属性名])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二的标签</title>
    <style>                 
        [class]{                <!--含有class属性的标签都被修饰 -->
            width: 100px;  
            height: 100px;
            background: red;
        }
</style>
</head>
<body>
    <div class="a"></div>  
    <div id="a"></div>   <!--没有class属性所以未被修饰 -->
     <p class="a"></p>    
</body>
</html>

并集选择器:使用多个选择器逗号隔开(#id,.class,[属性],标签名)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二的标签</title>
    <style>                 
        #a,[class]{                <!--包含两种选择器的范围 -->
            width: 100px;  
            height: 100px;
            background: red;
        }
</style>
</head>
<body>
    <div class="a"></div>  
    <div id="a"></div>   
     <p class="a"></p>    
</body>
</html>

常用属性

字体属性

font-family:设置字体

font-style:设置斜体

font-variant:英文文本大小写

font-weight:设置字体的粗细

font-size:设置字体大小

颜色与背景属性

color:设置内容颜色

background-color:设置标签背景颜色

background-image:设置背景图案

background-repeat:设置背景图填充重复方式

background-position:设置背景图案

background-size:设置背景图案大小

文本属性

text-align:设置文本的对齐方式

text:indent:设置文本首行缩进

line-height:设置文本的行高

a:link:设置链接为访问时的文本状态

a:visited:设置链接已经访问过的状态

a:hover:设置链接的鼠标激活状态

边框属性

有上下左右和颜色样式宽度各种搭配

border:没有设定方向和修饰属性就是四边加设置颜色宽度样式

border-color:就是全部四边加只设置颜色

border-top:就是全部颜色宽度样式都设置并且只给上面上边框

border-left-style:就是只设置左边且只设置样式

块元素属性

margin外边距与padding内边距

块元素与内联元素

块元素:会独占一行,默认宽度是填充父元素的宽度,高度是内容的高度。可再自定义宽高

常见的块元素有:ul列表、form表单、h1-h6标题、hr水平线、p段落、div

内联元素:不会独占一行,不能设置宽高还有边距这些,范围只是仅仅包裹内容。

常见的内联元素有:a链接、em斜体、img图片、input输入控件、label标签、select下拉选择器、textarea多行文本输入、span

块和内联的转换:

display:block 内转块

display:inline 块转内

display:inline-block 转成内联块,此元素不仅有块的特性修改宽高边距等还可以同行只要宽度够

浮动:通过设置浮动可以到达同行的效果不用去转内联块

Float常跟属性值left、right、none,相对于父元素 Float:none 不使用浮动 Float:left 靠左浮动 Float:right 靠右浮动

绝对定位与相对定位:

对于嵌套元素的相对定位,定位的元素的父元素是用相对定位就行。相当于定位position-relative还是absolute属性是作用于子元素

快到碗里

!

本文分享自微信公众号 - IT那个小笔记(qq1839646816),作者:木瓜煲鸡脚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-14

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML

    下面对常用标签进行简单的试例,详情见http://www.w3school.com.cn

    木瓜煲鸡脚
  • Request

    请求头中有一个叫referer的它的值表示上一个页面的URL,当从一个页面跳转到当前页面,那么当前页面的请求头的referer的值就表示从哪个页面过来的

    木瓜煲鸡脚
  • Hibernate多表关系配置

    映射文件中普通字段段的配置不用写上外键,在一的一方配置文件写上set标签name属性为关联属性名,里面还有key标签有column属性关系中的外键即另一个表的外...

    木瓜煲鸡脚
  • 一、HTML

    html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,...

    酱紫安
  • Kafka 自定义分区器

    (1) 如果键值为 null,并且使用了默认的分区器,那么记录将被随机地发送到主题内各个可用的分区上。分区器使用轮询(Round Robin)算法将消息均衡地分...

    CoderJed
  • python_web(三)一个简单web后端框架

    星辉
  • laravel+react+webpack+babel+gulp的配置

    laravel composer create-project laravel/laravel --prefer-dist npm npm install gu...

    前朝楚水
  • Spring Boot2 系列教程(二十一)整合 MyBatis

    前面两篇文章和读者聊了 Spring Boot 中最简单的数据持久化方案 JdbcTemplate,JdbcTemplate 虽然简单,但是用的并不多,因为它没...

    江南一点雨
  • 最简单的SpringBoot整合MyBatis教程

    前面两篇文章和读者聊了Spring Boot中最简单的数据持久化方案JdbcTemplate,JdbcTemplate虽然简单,但是用的并不多,因为它没有MyB...

    江南一点雨
  • 第36天:倒计时:发动短信验证、跳转页面、关闭广告

    setTimeout("函数",时间) setInterval(fn,5000);//每隔5秒执行一次fn setTimeout(fn,5000);//5秒之后...

    半指温柔乐

扫码关注云+社区

领取腾讯云代金券