首页 > 其他分享 >css语言

css语言

时间:2022-09-27 23:55:42浏览次数:46  
标签:语言 权重 标签 选择器 id css 属性

css:样式表、级联样式表、层叠样式表

css写在style标签里面,放在head标签中;大括号中写键值对语法

color:文字颜色

Font-family:字体

Font-size:字号

text-indent:首行缩进 单位是em代表一个文字的间距

text-align 文本对齐方式,默认left,还可以设置center居中,right居右。

实体化三属性:

宽度:width

高度:height

背景色:background

标签选择器:

直接在css语法中写标签的名字就可以选中对应的标签

div代表大盒子(容器 存放内容的)

span代表小盒子(容器 存放内容的)

id选择器:

#名字{}

特点: 不能重复使用 也不能一个人设置多个id(相当于人的身份证一定是唯一的)

 

 

类选择器:

.名字{}

特点:可以重复使用,一个人可以有多个类名(好像是人的称号一样)

 

 

注意:今后class类选择器使用频率高于id选择器

goole案例:

 

 

 

 

CSS引入方式:

1、行内式

这种形式一定不要用,它会让代码量变得非常庞大,不方便修改!

书写在开始标签身上的style属性

例如:

<div style="color:#333;background:pink;height:50px;">我是行内式CSS</div>

注意:行内式没有实现结构与样式分离

2、内嵌式

注意:内嵌式是结构与样式半分离

优点:方便课上案例的书写(电商网站的首页必须使用这种方式,因为电商首页要求加载速度必须快,内嵌式比外链式快一些)

缺点:html和css代码没有实现分离,不方便修改

3、外链式

通过link放在head标签中,把外部的css文件引入到html文件中

<link rel="stylesheet" type="text/css" href="my_css.css">

优点:实现了代码分离,方便修改和管理

缺点:运行速度比内嵌稍慢

总结:id选择器>类选择器>标签选择器

复合选择器:

后代选择器

规律:一个空格表示后代关系

 

 

并集、并列选择器:

div,span,h1,.span1,#span2{}

用逗号连接选择器,代表这些元素同时被选中

标签指定式、指定标签式:

div.类名

注意:标签和类名之间没有空格

高级权重对比:

1、引入方式对比:

外链和内嵌权重相同,先写得会被后写的覆盖

内嵌权重最大,如果想覆盖它,就只能给样式中添加,important来把权重提高

 

 

2、复合选择器权重:

id我们认为是100斤 class类名认为10斤 标签认为1斤

综合起来大的权重就高,如果权重一样,先写得被后写的覆盖

CSS文字控制常用属性:

文字粗细:font-weight(正常的:normal 加粗:bold)

文字倾斜:font-style(正常的:normal 倾斜:italic)

文字修饰属性:text-decoration(下划线:underline 顶划线:overline 贯穿线/删除线:line-through 无:none)

强制字母换行:word-break:break-all

首行缩进:text-indent:2em

伪类写法::hover 代表鼠标悬停状态的样式

行高属性:

line-height

一行文字的结束到上一行文字结束的间距。

边框属性:

border:1px solid red

粗细 实线 颜色

虚线:dashed

某个方向:border-left(right、top、bottom)

注意:边框属性只有实线和虚线是没有兼容性问题的,其它方式的线都会有不同程度的兼容问题,如果程序员使用了,一定要报错!

盒子模型:

盒子模型的组成=宽高+边框+内边距(内容和边框的距离)+外边距(盒子和盒子之间的距离)

html5新标签:

header 头部

nav 导航

aside 侧导航

article 文章块

footer 底部

注意:这些html5新标签只能使用在手机网站的书写中,可以提升搜索引擎对网站的优化,不能用在pc(电脑)端网站,因为ie低版本不识别这些新标签。 

标签:语言,权重,标签,选择器,id,css,属性
From: https://www.cnblogs.com/670ling/p/16736490.html

相关文章

  • 前端三件套 HTML+CSS+JS基础知识内容笔记
    HTML基础目录HTML基础HTML5标签doctype标签html标签head标签meta标签title标签body标签文本和超链接标签标题标签段落标签换行标签水平标签强调标签图片标签与超链接标签......
  • C++语言程序设计基础 内联函数
    C++内联函数是通常与类一起使用。如果一个函数是内联的,那么在编译时,编译器会把该函数的代码副本放置在每个调用该函数的地方。对内联函数进行任何修改,都需要重新编译函数......
  • CSS3 实现 网页顶部进度条
    有朋友们问网页顶部进度条 如何应用,现在github大部分国外网站都在用,这个效果可以使用现成的一些插件比如 ​​这个​​​,​​这个​​​,还有​​这个​​。比如youtobe......
  • 如何将编写的c语言程序打包成exe可执行文件呢?
    如何将编写的c语言程序打包成exe可执行文件呢?以前我们写程序很多是在编辑器上,让编辑起来编译运行我们的程序。如果想将其打包成exe可执行文件该如何做?我这里推荐使用code......
  • 基2时间抽取FFT算法推导,及C语言实现
    https://blog.csdn.net/qq_38677310/article/details/99663883 https://wenku.baidu.com/view/af198ef01a5f312b3169a45177232f60ddcce77d.html......
  • C语言每日一题——第一天
    第一天小明想要给他的朋友写一个生日祝福程序,在运行时,会根据输入的日期输出不同的结果。若在平时运行程序(例如9月28日):09-28:+3?-15而在朋友生日(12月13日)当天:12-13......
  • dos下edit;汇编语言编辑器edit;edit.com
    学习汇编语言的过程中可能会听到一个软件edit,但是很少有这个软件的来源。汇编语言工具edit全名为edit.com。edit.com是WINDOWS自带的MS-DOS应用程序,它的作用是编辑所有的......
  • C语言数组越界和溢出
    一、数组越界为了保证C/C++的运行效率,所以它们都不对数组越界进行检查。#include<stdio.h>intmain(){inta[4]={1,2,3,4};for(inti=-2;i<=8;++......
  • C语言:蟠桃
    #include<stdio.h>main(){intdays,sum=1;scanf("%d",&days);while(--days){sum=(sum+1)*2;}printf("%d",sum);getchar......
  • [css]一个块格式化上下文(BFC)阻止外边距重叠的示例
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>*{margin:0;paddin......