qt 引用css文件,css四种引入方式,选择器,CSS的常用属性

### css四种引入方式

# 1.行内式

# 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

# 2.嵌入式

# 嵌入式是将CSS样式集中写在网页的

标签对的标签对中。格式如下：

#

#

#

#

# 3.导入式

# 将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，

#

#

# 4.链接式

# 也是将一个.css文件引入到HTML文件中

#

###选择器：

# 1 基础选择器: * p # . (通用 标签 id class)

# 2 组合选择器: , 空格 > + (或 后代元素 子元素 毗邻)

#嵌套规则：

# 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

# 块级元素不能放在p里面。

# 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt

# li内可以包含div

# 块级元素与块级元素并列、内联元素与内联元素并列。

# 3 属性选择器: p[] p[name=""] p[name~=""] p[name|=""] p[name^=""] p[name$=""] p[name*=""]

# (属性，属性和值，多个属性空格连接，-连接的开头，匹配开头，匹配结尾，包含匹配)

# a:before a:after 在之前之后加内容 a:before{content="";color=red}

# 4 伪类选择器： 专用于控制链接的显示效果，伪类选择器：~注意顺序4在3下，3在2下

# a:link(没有接触过的链接),用于定义了链接的常规状态。

# a:visited(访问过的链接),用于阅读文章，能清楚的判断已经访问过的链接。

# a:hover(鼠标放在链接上的状态),用于产生视觉效果。

# a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态

### CSS的常用属性

# 1 颜色属性

# color: blue;color: #2e56ff;color:rgb(255,0,0);color: rgba(255,0,0,0.5);

# 英文 16进制 红绿蓝 a(0-1)透明度

# 2 字体属性

# font-size: 20px/50%/larger

# font-family:'Lucida Bright' 宋体

# font-weight: lighter/bold/border/

#

tom

# 3 背景属性：body不能为空 而且设置高height

# 背景颜色

# background-image: url('1.jpg');背景图片

# background-repeat: no-repeat;(repeat:平铺满)重复

# background-position：center center上下左右中

# 简写background: 20px 20px no-repeat #ff4 url('1.jpg')

# 4 文本属性：

# font-size: 10px;

# text-align: center;横向排列

# line-height: 200px;文本行高 文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

# text-indent: 150px; 首行缩进，50%：基于父元素(weight)的百分比

# letter-spacing: 10px;字母之间的距离

# word-spacing: 20px;单词之间的距离

# direction: rtl;从右向左写

# text-transform: capitalize;首字母大写

# 5 边框属性：

# border-style: solid;

# border-color: chartreuse;

# border-width: 20px;

# 简写：border: 30px rebeccapurple solid;

# 6 列表属性

# ul,ol{ list-style: decimal-leading-zero;

# list-style: none; list-style: circle;

# list-style: upper-alpha;

# list-style: disc; }

# 7 dispaly属性

# none隐藏

# block内联改为块级

# inline块级改内联

# 8 盒子模型:margin外边距 padding内边距 border

# padding会向外延伸，margin重叠取最大值,margin需要找到边界

# 9 float

#块级元素，标准流，浮动脱离标准流，左浮动左对齐，右浮动右对齐

#多个浮动跟随，放不下换行

#清除浮动，clear none不清除，left左清除，right右清除，both都清除，只能作用于浮动标签本身

# 10 position

#relative正常相对定位 absolute绝对定位 fixed相对于窗口定位

#position:relative top:10px bottom left right